使用 Web 音频 API 平滑音量变化

Question

javascript newbie here. So I've been messing around with the Web Audio API trying to figure stuff out and I found that exponentialRampToValueAtTime does just what I want except it only seems to do it once(?) Take this generic code:

context = new AudioContext();
oscillator = context.createOscillator();
contextGain = context.createGain();
oscillator.type = 'sine';
oscillator.frequency = 440
oscillator.connect(contextGain);
contextGain.connect(context.destination);
oscillator.start(0);

contextGain.gain.value = 1 by default so if I run contextGain.gain.exponentialRampToValueAtTime(0.1,context.currentTime + 2) it drops nice and smoothly from 1 to 0.1. But if I try to get it back at 1, say contextGain.gain.exponentialRampToValueAtTime(1,context.currentTime + 2) it instead jumps suddenly to 1. Why does this happen? Is there any way I can do this ramp as many times as I want? Thanks in advance.

Answer 1

You need to call setValueAtTime() first to mark beginning of a change:

contextGain.gain.setValueAtTime(contextGain.gain.value, context.currentTime);
contextGain.gain.exponentialRampToValueAtTime(0.1, context.currentTime + 2);

Without this, your gradual change starts in the past.

This is needed because the gradual change of an audio param starts from the previous event . That previous event is a previous gain change using the methods setValueAtTime() , linearRampToValueAtTime() , exponentialRampToValueAtTime() , etc.

Quote from the documentation at MDN :

The exponentialRampToValueAtTime() method of the AudioParam Interface schedules a gradual exponential change in the value of the AudioParam . The change starts at the time specified for the previous event , follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endTime parameter.

Here is small demo:

 var context = new AudioContext(); var oscillator = context.createOscillator(); var gain = context.createGain(); oscillator.type = 'sine'; oscillator.frequency = 440 oscillator.connect(gain); gain.connect(context.destination); document.getElementById('bplay').addEventListener('click', function() { context.resume(); oscillator.start(0); gain.gain.setValueAtTime(0.01, context.currentTime); gain.gain.exponentialRampToValueAtTime(1, context.currentTime + 2); }); document.getElementById('bdown').addEventListener('click', function() { gain.gain.cancelScheduledValues(context.currentTime); gain.gain.setValueAtTime(gain.gain.value, context.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, context.currentTime + 2); }); document.getElementById('bup').addEventListener('click', function() { gain.gain.cancelScheduledValues(context.currentTime); gain.gain.setValueAtTime(gain.gain.value, context.currentTime); gain.gain.exponentialRampToValueAtTime(1, context.currentTime + 2); });

 <button type="button" id="bplay">Play</button> <button type="button" id="bdown">Volume down</button> <button type="button" id="bup">Volume up</button>