CODEWITHSUNDEEP
javascripthtmlaudioweb-audio-api
audioperson
audioperson

Reputation: 1

Slider hooked up to a Web Audio API gain node is popping and clicking when I drag it. No smooth ramp in volume as I drag

A gain node is hooked up to a UI slider via an HTML input type 'range'. Got it to successfully change the volume as I drag, but no matter how I set the step size, I hear noise when I drag on the slider.

the HTML looks like this:

   <input id="slider6Volume" type="range" min="0.0008" max="1.0008" step="0.0001" value="0.0008" oninput="changeGain(this.value)"/>

The .js is like this:

function changeGain(newValue) {

document.getElementById('slider6Volume').addEventListener('input', function() {

gainNode6.gain.setValueAtTime(newValue, audioCtx.currentTime);  
console.log ("Channel 6: ", this.value);

}, "false");

I started with float values that weren't nearly so tiny, but this resulted in audible stairstepping between gain values. It sounds like it's getting conflicting gain updates, but the console dump I hooked up looks ok. Float values in a steady uninterrupted ordered stream. What am I missing?

Upvotes: 0

Views: 649

Answers (1)

cwilso
cwilso

Reputation: 13918

Don't use setValueAtTime - use setTargetAtTime, with a small value for timeConstant (like, try 0.01 as a starting point). That will dezipper the setting.

Upvotes: 3

Related Questions