如何准确同步 <audio> 从Web音频时间轴开始播放

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

我可能在这里做错了吗？ 我是在做乱序的事情吗？ 我该如何解决？

旁注：在Firefox中， trackGain.gain.value ， trackGain.gain.value始终为1。 好像是个错误。

Answer 1

我的猜测是Safari在await（）节之后更新currentTime之前，以某种方式Safari到达了“ this.trackGain.gain.setValueAtTime（0，currentTime）”-因为存在一个不连续的跳转，该跳转与被触发的setLinearRampAtTime（）调用一致具有过去的时间值。 setValue / setLinear调用看起来好像在t = 0.60和t = 0.62之间触发（尝试将console.log添加到set部分进行测试）。

这将与数学相符-值与在t = 0时将其初始点设置为0且在t = 2时将其设置为value = 1的斜坡大致一致。