使用Web Audio API的平滑音量更改

Question

此处是javascript新手。因此，我一直在弄乱Web Audio API试图找出问题，然后发现exponentialRampToValueAtTime可以满足我的要求，只是似乎只执行一次（？）。请使用以下通用代码：

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，因此如果我运行contextGain.gain.exponentialRampToValueAtTime(0.1,context.currentTime + 2)，它将从1平稳地下降到0.1。但是，如果我尝试将其恢复为1，请说contextGain.gain.exponentialRampToValueAtTime(1,context.currentTime + 2)而是突然跳至1。为什么会发生这种情况？有什么办法可以让我多次进行此渐变？提前致谢。

Answer 1

您需要先致电setValueAtTime()标记更改开始：

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

没有这个，您的逐渐改变就从过去开始。

这是必需的，因为音频参数的逐渐变化从上一个事件开始。该先前事件是使用方法setValueAtTime()，linearRampToValueAtTime()，exponentialRampToValueAtTime()等进行的先前增益更改。

[C0的引用：

documentation at MDN接口的exponentialRampToValueAtTime()方法安排AudioParam值的逐渐指数变化。 更改从为[[上一个事件

指定的时间开始”，跟随指数增长到AudioParam参数中给定的新值，并在value中给定的时间达到新值参数。这里是一个小演示：

endTime

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);
});