如何准确地将<audio>播放与网络音频时间线开始同步

Question

我正在尝试让它在用户单击按钮时播放(通过<audio>)音频文件，但它使用Web audio的linearRampToValueAtTime方法淡入。

整个过程从设置上下文时间线上的增益值开始：

if (fadeIn) {
  console.log('0 gain at', currentTime);
  console.log('fade to 1 by', currentTime + fadeIn);
  this.trackGain.gain.setValueAtTime(0, currentTime);
  this.trackGain.gain.linearRampToValueAtTime(1, currentTime + fadeIn);
} else {
  this.trackGain.gain.setValueAtTime(1, currentTime);
}

然后在这之后：

await this.$refs.audio.play();
await this.audioCtx.resume();
// currentTime must be set after play starts, for Safari
this.$refs.audio.currentTime = this.trackList[0].startTime;

当我在Chrome中触发这个过程时，数字看起来很好：

​

​

它们并不完美(磁道增益从0开始)，但已经足够接近了。然而，在Safari中，音频开始播放之前的这种延迟要糟糕得多。在音频元素播放之前，上下文时间线有足够的时间开始加速。

​

​

正如您所看到的，上下文时间线运行了一段时间，跟踪增益从0.31而不是0开始。

下面是完整的代码：https://codesandbox.io/s/ykjkoj3yvv

我是不是做错了什么？我做的事情有没有乱序？我应该如何解决这个问题？

附注:在火狐中，无论什么情况，trackGain.gain.value都是1。看起来像是个窃听器。

Answer 1

我的猜测是，不知何故，Safari在await()部分之后更新currentTime之前到达了"this.trackGain.gain.setValueAtTime(0，currentTime)“-因为有一个不连续的跳转，这与使用过去的时间值触发的setLinearRampAtTime()调用是一致的。setValue/setLinear调用看起来像是在t=0.60和t=0.62之间触发(尝试向set部分添加console.log以进行测试)。

这将与数学一致-这些值与在t=0中将初始点设置为0的渐变以及在t=2中将其初始点设置为value=1的渐变大致一致。