用 AudioContext.suspend()/resume() 作为流式音视频的同步门控

问题

在流式音视频场景中（如 AI 语音对话），音频和视频的同步是一个棘手的问题。音频数据通过 WebSocket 分块到达，如果直接播放，会因为网络抖动导致音画不同步。

AudioContext 的时钟特性

AudioContext 有一个非常重要的特性：它维护着自己的高精度时钟（audioContext.currentTime），独立于 JavaScript 的 Date.now() 或 performance.now()。

const ctx = new AudioContext();
console.log(ctx.currentTime); // 精确到采样级别的时间

核心思路：suspend/resume 作为门控

AudioContext.suspend() 会冻结音频时钟，所有已调度的音频节点都会暂停。resume() 则恢复时钟和播放。

这正好可以用作流式数据的同步门控：

const ctx = new AudioContext();

// 数据不足时暂停
async function onBufferUnderrun() {
  await ctx.suspend();
  console.log("Buffer underrun, clock paused at", ctx.currentTime);
}

// 数据充足时恢复
async function onBufferReady() {
  await ctx.resume();
  console.log("Buffer ready, clock resumed at", ctx.currentTime);
}

与视频同步

将视频的播放进度绑定到 AudioContext.currentTime：

function syncVideoToAudio(videoElement, audioContext) {
  function tick() {
    if (audioContext.state === "running") {
      videoElement.currentTime = audioContext.currentTime;
    }
    requestAnimationFrame(tick);
  }
  tick();
}

当音频因 buffer 不足而 suspend 时，currentTime 冻结，视频也自然暂停在对应帧上。

优势

1. 零漂移：音频时钟精度远高于 JavaScript 定时器
2. 原子操作：suspend/resume 保证时钟状态一致
3. 浏览器原生：无需第三方库

总结

AudioContext.suspend()/resume() 是一个被低估的 API。它不仅可以用于音频播放控制，还可以作为流式场景中音视频同步的精确门控机制。