如何获取Web Audio API音频播放启动时刻对应的Unix时间戳

可行性结论 #

该需求完全可以实现。核心是要规避直接在SourceNode.start()调用行同步取系统时间的误差——主线程调度延迟、音频硬件缓冲延迟都会导致这个时间比真实播放时间早几十到数百毫秒，需要结合Web Audio API自带的音频硬件时钟做对齐计算。

实现原理 #

Web Audio API内部维护了一个独立的高精度硬件时钟AudioContext.currentTime，单位为秒，完全不受主线程阻塞影响，是音频调度的唯一时间基准。我们只需要建立这个音频时钟和系统Unix时间戳的映射关系，就能精准推算出音频真实播放的Unix时间。

具体操作步骤 #

• 首先确保AudioContext处于running状态，规避浏览器对自动播放的限制（未触发用户交互前音频上下文默认是suspended状态，调度不会生效）
• 调度播放前，同步读取当前系统Unix时间戳和当前音频上下文时间，建立两个时钟的映射
• 确定音频调度的音频时间点（如果是立刻播放则取当前音频上下文时间）
• 结合映射关系和音频输出延迟，计算得到真实播放对应的Unix时间戳

代码示例 #

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// 传入音频buffer执行播放，返回真实播放的Unix时间戳
async function getActualPlayTime(audioBuffer) {
  // 恢复音频上下文运行状态
  if (audioCtx.state === 'suspended') {
    await audioCtx.resume();
  }

  const sourceNode = audioCtx.createBufferSource();
  sourceNode.buffer = audioBuffer;
  sourceNode.connect(audioCtx.destination);

  // 同步获取两个时钟的当前值，建立映射
  const currUnix = +new Date();
  const currAudioTime = audioCtx.currentTime;
  // 调度立刻播放
  const playAudioTime = currAudioTime;
  sourceNode.start(playAudioTime);

  // 加上输出延迟修正精度，outputLatency为音频从上下文输出到硬件播放的延迟，单位秒
  const outputLatency = audioCtx.outputLatency || 0;
  // 音频时间差转毫秒，和系统时间拼接得到真实播放时间戳
  const actualPlayUnix = currUnix + (playAudioTime - currAudioTime + outputLatency) * 1000;

  return actualPlayUnix;
}

精度优化注意事项 #

• 如果需要进一步验证精度，可以监听sourceNode的onended事件，用结束时间戳减去音频总时长反向推算播放开始时间，两者误差通常在10ms以内
• 不要依赖setTimeout、requestAnimationFrame等主线程定时器来触发时间获取，这类回调的调度延迟会严重影响精度

内容的提问来源于stack exchange，提问作者Samson