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

Question

I'm trying to make it so when the user clicks a button, an audio file is played (via <audio> ), but it fades in using Web Audio's linearRampToValueAtTime method.

The whole process starts off by setting gain values on the context timeline:

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

And then after that's done:

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;

When I trigger this process in Chrome, the numbers look good:

They're not perfect (with track gain starting at 0), but it's close enough. In Safari, however, this delay before the audio starts playing is much worse. The context timeline has enough time to start ramping up before the audio element plays.

As you can see, the context timeline runs for a while, and track gain starts at 0.31 instead of 0.

Here's the full code: https://codesandbox.io/s/ykjkoj3yvv

Am I maybe doing something wrong here? Am I doing things out of order? How should I address this?

Side note: in Firefox, trackGain.gain.value is always 1 no matter what. Seems like a bug.

Answer 1

My guess is that somehow Safari is getting to the "this.trackGain.gain.setValueAtTime(0, currentTime)" BEFORE updating currentTime after the await() sections - because there's a discontinuous jump that is consistent with a setLinearRampAtTime() call being fired with a time value that is in the past. The setValue/setLinear calls look like they're firing between t=0.60 and t=0.62 (try adding a console.log to the set section to test).

That would be consistent with the math - the values are roughly consistent with a ramp that has its initial point set to 0 at t=0, and a ramp set to value=1 at t=2.