如何用Web Audio API向AudioContext传入PCM数据？BufferSourceNode报错解决

问题根源 #

BufferSourceNode是一次性设计的Web Audio API组件：一旦给它设置过非null的buffer并调用start()，就不能再修改buffer属性，这是API规范明确要求的，你遇到的报错属于预期行为。

方案1：每次创建新BufferSourceNode（开销远低于你的顾虑） #

你担心频繁创建节点开销大，但实际上BufferSourceNode是轻量级对象，浏览器对这类节点的创建、销毁做了深度优化，完全能应对高频调用（比如你4096字节的块，48000采样率下每块约85ms，每秒创建11个节点毫无压力）。

修正后的代码：

let playerAudioContext;
let currentTime = 0;

async function startPlayer() {
  playerAudioContext = new AudioContext();
}

async function feed(pcmData) {
  // 优化PCM解析：用TypedArray替代逐字节循环，效率提升明显
  const int16Array = new Int16Array(pcmData);
  const audioBuffer = playerAudioContext.createBuffer(1, int16Array.length, 48000);
  const channelData = audioBuffer.getChannelData(0);
  
  // 直接将16位整数映射到Web Audio需要的[-1, 1]浮点数范围
  channelData.set(int16Array.map(sample => sample / 32768));

  // 每次feed创建新的BufferSourceNode
  const sourceNode = playerAudioContext.createBufferSource();
  sourceNode.buffer = audioBuffer;
  sourceNode.connect(playerAudioContext.destination);
  
  // 精确计算启动时间，保证音频连续播放
  const startTime = currentTime;
  const bufferDuration = audioBuffer.duration;
  sourceNode.start(startTime);
  
  currentTime += bufferDuration;
}

方案2：用AudioWorklet实现流式音频（更适合连续喂数据场景） #

如果你的场景是持续接收音频流（比如实时语音、直播音频），AudioWorklet是更优选择。它在独立的音频线程处理数据，避免频繁创建节点的开销，同时保证低延迟。

步骤1：创建AudioWorklet处理器文件（命名为audio-processor.js） #

class StreamProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this.dataQueue = [];
    // 接收主线程发送的音频数据
    this.port.onmessage = (e) => {
      this.dataQueue.push(new Float32Array(e.data));
    };
  }

  process(inputs, outputs) {
    const outputChannel = outputs[0][0];
    let filledLength = 0;

    // 从队列中取数据填充输出缓冲区
    while (filledLength < outputChannel.length && this.dataQueue.length > 0) {
      const currentChunk = this.dataQueue[0];
      const copySize = Math.min(currentChunk.length, outputChannel.length - filledLength);
      
      outputChannel.set(currentChunk.subarray(0, copySize), filledLength);
      filledLength += copySize;

      // 处理剩余未用完的块
      if (copySize < currentChunk.length) {
        this.dataQueue[0] = currentChunk.subarray(copySize);
      } else {
        this.dataQueue.shift();
      }
    }

    // 缓冲区剩余位置填0，避免杂音
    for (let i = filledLength; i < outputChannel.length; i++) {
      outputChannel[i] = 0;
    }

    return true;
  }
}

registerProcessor('stream-processor', StreamProcessor);

步骤2：主文件中集成AudioWorklet #

let playerAudioContext;
let workletNode;

async function startPlayer() {
  playerAudioContext = new AudioContext();
  // 加载处理器模块
  await playerAudioContext.audioWorklet.addModule('audio-processor.js');
  // 创建Worklet节点并连接到输出
  workletNode = new AudioWorkletNode(playerAudioContext, 'stream-processor');
  workletNode.connect(playerAudioContext.destination);
}

async function feed(pcmData) {
  // 转换PCM数据到Web Audio支持的Float32格式
  const int16Array = new Int16Array(pcmData);
  const float32Array = new Float32Array(int16Array.length);
  
  // 循环转换比map更适合大量数据场景
  for (let i = 0; i < int16Array.length; i++) {
    float32Array[i] = int16Array[i] / 32768;
  }
  
  // 发送数据到Worklet，传递ArrayBuffer避免内存拷贝
  workletNode.port.postMessage(float32Array.buffer, [float32Array.buffer]);
}

补充：PCM解析的优化细节 #

你原来的逐字节循环解析效率较低，改用TypedArray直接操作内存块能大幅提升速度：

• 直接将输入的pcmData转为Int16Array（匹配你的16位单声道PCM格式）
• 转换为Float32时，循环处理比Array.map()在大数据量下性能更稳定。

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