Web Audio API音频蜂鸣与Canvas可视化的精准同步延迟问题

我使用Web Audio API的audioContext = new AudioContext()，根据用户定义的BPM和节拍型调度每拍的蜂鸣音效（下称“音轨”），同时在Canvas上通过requestAnimationFrame逐帧重绘实现音轨可视化，核心目标是实现音频与视觉的精准同步。

已解决与待解决问题 #

• 已解决：时钟同步，通过结合Audio API线程的currentTime、主线程setInterval和渲染用的requestAnimationFrame三种时钟实现。
• 待解决：延迟问题——虽然能用audioContext.createOscillator().start(audioContext.currentTime + 1)精准调度音效，但受音频设备延迟影响，用户无法立即听到声音。

我的疑问与尝试 #

我查阅了大量资料并尝试多种方法，但对延迟处理仍存疑问：

• 清楚使用sourceBuffers需要预先加载；
• 不确定是否需要将音频和视觉的启动时间都延迟audioContext.baseLatency秒；
• 知晓audioContext.outputLatency是关键指标，但实测延迟远高于该值，还存在驱动返回错误值的不确定性。

我需要的是：

• 能可靠获取调度启动时间与用户实际听到蜂鸣的时间差的方法；
• 或者其他可行的音视同步方案。

测试方式 #

• 直接观察听看是否同步；
• 录屏慢放对比音画时间差；
• 监听振荡器ended事件对比时间戳。

更新测试发现 #

通过以下AudioWorkletProcessor测试代码发现，仅第一个蜂鸣受audioContext.baseLatency影响，后续蜂鸣无明显延迟：

class Processor extends AudioWorkletProcessor {
  constructor(options) {
    super(options)
    this.started = false
  }

  process(inputs) {
    if (!this.started && inputs[0]?.[0]?.[0]) {
      this.port.postMessage('started')
      this.started = true
    } else if (this.started && !inputs[0]?.[0]?.[0]) {
      this.port.postMessage('finished')
      this.started = false
      // return false
    }
    return true
  }
}

registerProcessor('processor', Processor)

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