使用Audio Worklet播放音频出现爆音问题的解决请求

• 用环形缓冲队列管控音频块节奏
  Audio Worklet的播放时钟由音频硬件驱动，主线程推送的音频块必须和这个时钟对齐，不能直接硬塞。在Worklet内部实现一个线程安全的环形缓冲：主线程只负责将捕获到的PCM块写入缓冲，Worklet的process方法每次根据当前需要处理的帧数量（由AudioContext决定，通常128/256帧），从缓冲中读取对应长度的数据。缓冲大小建议设为2-3倍单次处理帧长度，留足余量应对主线程的推送抖动，避免块重叠或欠载。

• 严格对齐采样率与帧格式
  检查getUserMedia捕获的音频采样率（比如44100Hz）和AudioContext的采样率是否一致，不一致必须做重采样处理（可以用WebAssembly或JS实现轻量重采样）。另外，主线程推送的PCM块大小尽量和Worklet单次处理的帧长度匹配，若无法匹配，要在缓冲中实现块的拆分/合并逻辑，保证每次读取的帧数量准确。

• 减少跨线程通信的延迟与乱序
  主线程的任务阻塞会导致音频块推送延迟或顺序错乱，尽量绕开主线程直接传递数据：

  • 用SharedArrayBuffer配合Atomics操作，让音频捕获线程（如果是单独Worker）和Audio Worklet直接共享缓冲，避免主线程转发的开销；
  • 若必须通过主线程转发，使用MessageChannel的端口直接传递，比普通postMessage更高效。

• 校验PCM数据格式一致性
  确保捕获的PCM格式和Audio Worklet要求匹配：

  • 多数情况下Worklet要求Float32格式，若捕获的是Int16格式，需转换：new Float32Array(int16Data.map(v => v / 32768))；
  • 通道数要一致，比如捕获是单声道，Worklet输出也要用单声道，否则需做通道映射。

• 调试缓冲状态定位问题
  在Worklet的process方法中添加缓冲状态日志，判断是溢出还是欠载：

class PlaybackProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this.ringBuffer = new RingBuffer(/* 初始化参数：容量、通道数 */);
  }

  process(inputs, outputs, parameters) {
    const outputFrameCount = outputs[0][0].length;
    const availableFrames = this.ringBuffer.getAvailableFrames();

    if (availableFrames < outputFrameCount) {
      // 欠载，填充静音避免爆音
      outputs[0][0].fill(0);
      console.warn(`缓冲欠载：仅${availableFrames}帧，需${outputFrameCount}帧`);
    } else if (availableFrames > this.ringBuffer.capacity * 0.8) {
      console.warn(`缓冲溢出：剩余${availableFrames}帧，已达容量80%`);
    } else {
      this.ringBuffer.read(outputs[0][0], outputFrameCount);
    }
    return true;
  }
}

如果频繁溢出，调大缓冲容量；如果频繁欠载，优化主线程或捕获逻辑的性能，或适当增大缓冲余量。

• 关闭不必要的音频处理特性
  临时关闭getUserMedia的自动增益、回声消除等特性，排除这些特性导致的音频电平突变：

navigator.mediaDevices.getUserMedia({
  audio: {
    autoGainControl: false,
    echoCancellation: false,
    noiseSuppression: false,
    sampleRate: 44100 // 显式指定和AudioContext一致的采样率
  }
});

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