使用AudioWorklet播放流式MP3音频出现杂音问题求助

需求背景 #

需要在浏览器中播放后端流式传输的音频，模拟实时语音通话效果，目标是兼容主流浏览器、设备及操作系统。音频格式为44.1kHz采样率、192kbps的MP3。

AudioWorklet方案实现与问题 #

app.js 代码 #

await audioContext.audioWorklet.addModule('call-processor.js');

const audioContext = new AudioContext({ sampleRate: 44100 });
const audioWorkletNode = new AudioWorkletNode(audioContext, 'call-processor');

// add streamed audio chunk to the audioworklet
const addAudioChunk = async (base64) => {
  const buffer = Buffer.from(base64, 'base64');

  try {
    const audioBuffer = await audioContext.decodeAudioData(buffer.buffer);
    const channelData = audioBuffer.getChannelData(0); // Assuming mono audio

    audioWorkletNode.port.postMessage(channelData);
  } catch (e) {
    console.error(e);
  }
};

call-processor.js 代码 #

class CallProcessor extends AudioWorkletProcessor {
  buffer = new Float32Array(0);

  constructor() {
    super();
    
    this.port.onmessage = this.handleMessage.bind(this);
  }

  handleMessage(event) {
    const chunk = event.data;

    const newBuffer = new Float32Array(this.buffer.length + chunk.length);

    newBuffer.set(this.buffer);
    newBuffer.set(chunk, this.buffer.length);

    this.buffer = newBuffer;
  }

  process(inputs, outputs) {
    const output = outputs[0];
    const channel = output[0];
    const requiredSize = channel.length;

    if (this.buffer.length < requiredSize) {
      // Not enough data, zero-fill the output
      channel.fill(0);
    } else {
      // Process the audio
      channel.set(this.buffer.subarray(0, requiredSize));
      // Remove processed data from the buffer
      this.buffer = this.buffer.subarray(requiredSize);
    }

    return true;
  }
}

registerProcessor('call-processor', CallProcessor);

测试中出现的问题 #

• PC端Chrome：每次流响应的首个音频块播放正常，但后续块存在杂音
• iPhone端：所有音频块播放怪异，带有强烈机械感

此前尝试的方案与问题 #

之前基于standardized-audio-context试过两种方案，均无法实现无缝播放，音频块间存在明显跳变：

• 方案a：递归等待当前音频缓冲源播放完毕后，再启动下一个音频块的播放
• 方案b：收到音频块后立即启动缓冲源，将播放起始点设为之前所有音频缓冲的时长之和

此前方案的app.js代码 #

import { Buffer } from 'buffer';
import { AudioContext } from 'standardized-audio-context';

const audioContext = new AudioContext();

const addAudioChunk = async (base64) => {
  const uint8array = Buffer.from(base64, 'base64');
  const audioBuffer = await audioContext.decodeAudioData(uint8array.buffer);
  const source = audioContext.createBufferSource();

  source.buffer = audioBuffer;

  source.start(nextPlayTime);

  nextPlayTime += audioBuffer.duration;
}

问题根源分析 #

1. AudioWorklet方案的核心问题 #

• 采样率不匹配：你手动指定了AudioContext的采样率为44100，但不同设备的默认采样率不同（比如iOS设备通常是48000）。解码后的MP3采样率如果和AudioContext实际运行采样率不一致，浏览器会自动重采样，这个过程在主线程处理后再传给Worklet，会打乱数据时序，导致杂音或机械感。
• MP3帧边界问题：MP3是帧结构编码，单独解码小块数据时，解码器可能无法正确处理帧头/帧尾的依赖，导致解码出的音频存在截断或失真，后续块的错误会累积放大，表现为杂音。
• 缓冲同步问题：postMessage传递数据的时机如果和Worklet的process回调节奏不匹配，容易出现缓冲不足填充零，或者数据堆积后播放断层的情况。

2. 此前BufferSource方案的无缝播放问题 #

• 方案a：串行播放逻辑无法提前预加载缓冲，一旦网络延迟或解码耗时，就会出现明显间隔，根本做不到无缝。
• 方案b：依赖nextPlayTime累加时长同步，但audioBuffer.duration是基于解码采样率计算的，若和AudioContext实际采样率不一致，会产生误差，多次累加后偏移量放大，导致播放跳变；同时主线程事件循环的繁忙会影响start(nextPlayTime)的调度精度，进一步加剧断层。

可行优化方向 #

• 统一采样率：不要手动指定AudioContext采样率，使用设备默认值，解码后通过OfflineAudioContext将音频重采样到当前AudioContext的采样率，再传给Worklet。
• 处理MP3帧边界：后端发送的音频块必须是完整的MP3帧，避免截断；或者前端使用流式MP3解码器（如JS版libmp3lame），直接处理流式数据，规避单块解码的帧问题。
• AudioWorklet缓冲优化：在Worklet中维护200ms左右的预缓冲，避免缓冲不足填充零；监听缓冲水位，过低时暂停播放或请求更多数据，保证连续性。
• BufferSource方案改进：利用AudioBufferSourceNode的onended事件提前预加载下一个块，在当前块结束前几十毫秒启动下一块播放；基于AudioContext的currentTime计算播放起始点，避免累加误差。

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