为什么 PannerNode 的位置快速更新时会出现音频点击/弹出？

Question

我已经用 PannerNode 试验了很长一段时间，在我使用 requestAnimationFrame() 或 setInterval() 反复更新 panner 位置的情况下，我注意到点击/弹出音频。

为什么会发生这种情况以及如何解决？

我希望通过引入作为 AudioParam 的位置来解决这个问题，或者我可以通过使用坡道来规避这个问题。我已经尝试在 Chrome Canary 上设置有坡道和没有坡道的位置，但问题仍然存在。

您可以在这里亲自听到：https://jsfiddle.net/txLke4fh/

代码sn-p：

var ctx = new AudioContext();
var osc = ctx.createOscillator();
var panner = ctx.createPanner();
var temp = true;

osc.frequency.value = 220;
osc.connect(panner);

panner.panningModel = 'HRTF';
panner.setPosition(0, 0, 0);
panner.connect(ctx.destination);

osc.start(0);
osc.stop(ctx.currentTime + 10);

setInterval(function() {
  if (temp) {
    panner.setPosition(50, 0, 0);
    temp = false;
  } else {
    panner.setPosition(-50, 0, 0);
    temp = true;
  }
}, 100);

编辑：它也可以在 Chrome Canary 上观察到，有或没有线性斜坡。

var ctx = new AudioContext();
var osc = ctx.createOscillator();
var panner = ctx.createPanner();
var temp = true;

osc.frequency.value = 220;
osc.connect(panner);

panner.panningModel = 'HRTF';
panner.positionX.value = 0;
panner.connect(ctx.destination);

osc.start(0);
osc.stop(ctx.currentTime + 10);

setInterval(function() {
  if (temp) {
    panner.positionX.linearRampToValueAtTime(50, ctx.currentTime + 0.01);
    temp = false;
  } else {
    panner.positionX.linearRampToValueAtTime(-50, ctx.currentTime + 0.01);
    temp = true;
  }
}, 1000);

Answer 1

您正在从一个位置瞬时移动到另一个位置。我当然希望得到点击，具体取决于您的移动方式。

如果你有 Chrome canary，你应该可以使用自动化（但不要使用setPosition()，它不会做自动化）。如果您有一个仍然可以通过自动化点击的示例，请发布它；我想看看这样的例子。