获取麦克风采样帧丢失计数/事件以优化音频时序

需求说明 #

需要实现麦克风采样丢失的计数器，或在采样丢失时触发事件，用于优化麦克风与音频输出的时序同步。当前基于Web Audio API的代码在Firefox高负载场景下会随机丢失少量采样，需获取丢失事件通知及具体丢失数量。

现有代码分析 #

你当前的AudioWorkletProcessor尝试通过currentFrame与本地frame的差值补全丢失采样，但未实现丢失计数和事件通知，且差值阈值（500000）过大，容易忽略真实的小量丢失或误判异常情况。

改进方案与代码实现 #

以下是修改后的代码，新增采样丢失计数、事件通知功能，并优化丢失判断逻辑：

$micStream = await navigator.mediaDevices.getUserMedia({
  audio: {
    echoCancellation: false,
    noiseSuppression: false,
    autoGainControl: false,
  }
});
$micAudioCtx = new AudioContext();
$micMS = $micAudioCtx.createMediaStreamSource($micStream);

if ($micAudioCtx.audioWorklet && $micAudioCtx.audioWorklet.addModule) {
  const $data = `
class RecorderProcessor extends AudioWorkletProcessor {
  bufferSize = 17640;
  written = 0;
  buffer = new Float32Array(this.bufferSize);
  frame = 0;
  // 新增：累计丢失采样计数器
  totalLostSamples = 0;

  process($inputs) {
    const $cd = $inputs[0][0];
    const $cf = currentFrame;
    if (!$cd) return true;

    // 检测采样丢失
    if (this.frame < $cf) {
      // 计算本次丢失的采样数量
      const lostCount = $cf - this.frame;
      // 过滤异常大差值（避免系统时钟跳变导致误判）
      if (lostCount < 48000) { // 48000对应1秒采样，可根据采样率调整
        this.totalLostSamples += lostCount;
        // 发送丢失事件通知到主线程
        this.port.postMessage({
          type: 'sample-loss',
          lostCount: lostCount,
          totalLostSamples: this.totalLostSamples
        });

        // 可选：补全丢失的采样为0（如果需要保持时序连续）
        for (let $i = 0; $i < lostCount; $i++) {
          this.buffer[this.written++] = 0;
          if (this.written === this.bufferSize) {
            this.port.postMessage({ type: 'audio-buffer', data: this.buffer.slice(0) });
            this.written = 0;
          }
        }
      }
    }

    this.frame = $cf + $cd.length;
    // 处理正常采样
    for (let $i = 0, $c = $cd.length; $i < $c; $i++) {
      this.buffer[this.written++] = $cd[$i];
      if (this.written === this.bufferSize) {
        this.port.postMessage({ type: 'audio-buffer', data: this.buffer.slice(0) });
        this.written = 0;
      }
    }
    return true;
  }
}

registerProcessor('VAProcessor', RecorderProcessor);
  `;
  const moduleUrl = 'data:text/javascript;base64,' + btoa($data);
  await $micAudioCtx.audioWorklet.addModule(moduleUrl);
  $micRec = new AudioWorkletNode($micAudioCtx, 'VAProcessor');
  $micRec.port.onmessage = function($e) {
    if ($e.data.type === 'sample-loss') {
      // 处理采样丢失事件，比如更新计数器UI、调整时序补偿
      console.log(`丢失采样：${$e.data.lostCount}，累计丢失：${$e.data.totalLostSamples}`);
      // 这里可以调用你的时序优化逻辑
    } else if ($e.data.type === 'audio-buffer') {
      anyFunctionToProcessSamples($e.data.data);
    }
  };
}

关键改进点 #

• 丢失计数与通知：新增totalLostSamples累计计数器，每次检测到丢失时计算本次丢失数量，并通过port.postMessage发送结构化消息到主线程，方便触发后续时序优化逻辑。
• 异常过滤：设置合理的丢失数量阈值（示例中为48000，对应48kHz采样率下1秒的采样数），避免系统时钟跳变或极端异常导致的误统计。
• 消息结构化：区分音频缓冲区消息和丢失事件消息，让主线程处理逻辑更清晰。
• 时序保持可选：保留了补0逻辑，若不需要补全丢失采样，可删除补0循环，仅保留计数和通知逻辑。

额外建议 #

• 可根据实际使用的采样率调整丢失阈值，比如44.1kHz采样率下可设为44100。
• 时序优化时，可根据累计丢失采样数调整音频输出的延迟，或对输出信号做相应的偏移补偿。
• 在Firefox中，可尝试设置AudioContext的latencyHint为'interactive'，降低默认延迟，减少高负载下的采样丢失概率：

  $micAudioCtx = new AudioContext({ latencyHint: 'interactive' });
  

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