通过单个AudioContext同时播放多AudioSourceNode致音频失真问题

问题根源 #

你遇到的是音频信号削波失真：当多个单声道PCM音频叠加后，信号幅度超出了Web Audio规定的[-1.0, 1.0]范围，超出部分会被硬截断，直接导致失真。8位PCM的原始取值范围是[0, 255]，如果转换为Web Audio所需的浮点格式时未做正确归一化，每个音频的信号幅度本来就接近上限，叠加后必然超标。

正确解决方案 #

1. 先做PCM数据的归一化转换 #

8位单声道PCM是无符号值（0到255），必须先转为有符号范围，再归一化到[-1.0, 1.0]，才能适配Web Audio的要求：

// 将8位PCM数组转为Web Audio兼容的Float32Array
function convert8BitPCMToFloat(pcmData: Uint8Array): Float32Array {
  const floatArray = new Float32Array(pcmData.length);
  for (let i = 0; i < pcmData.length; i++) {
    // 先转成有符号值(-128~127)，再除以128缩放到[-1.0, 1.0]
    floatArray[i] = (pcmData[i] - 128) / 128;
  }
  return floatArray;
}

如果跳过这一步，原始PCM数据的幅度会直接超出Web Audio的阈值，叠加后失真不可避免。

2. 用全局增益节点动态控制混音 #

不要给每个音频源单独设置固定增益，而是创建一个全局的GainNode作为所有音频的汇总出口，根据当前活跃音频的数量动态调整全局增益，确保总幅度不超标：

class AudioManager {
  private audioContext: AudioContext;
  private masterGain: GainNode;
  private activeSources: AudioBufferSourceNode[] = [];

  constructor() {
    this.audioContext = new AudioContext();
    this.masterGain = this.audioContext.createGain();
    this.masterGain.connect(this.audioContext.destination);
  }

  playSound(pcmData: Uint8Array) {
    const floatData = convert8BitPCMToFloat(pcmData);
    const buffer = this.audioContext.createBuffer(1, floatData.length, 11025);
    buffer.copyToChannel(floatData, 0);

    const source = this.audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(this.masterGain);
    
    // 追踪活跃音频源
    this.activeSources.push(source);
    source.onended = () => {
      const index = this.activeSources.indexOf(source);
      if (index !== -1) this.activeSources.splice(index, 1);
      this.updateMasterGain();
    };

    this.updateMasterGain();
    source.start();
  }

  private updateMasterGain() {
    // 动态计算增益：1除以活跃音频数，保证总幅度不超过1.0
    // 可设置最小值避免音频过多时音量过低
    const gainValue = Math.min(1 / this.activeSources.length, 1);
    this.masterGain.gain.value = gainValue;
  }
}

这种方式能确保无论同时播放多少音频，总信号幅度都被控制在安全范围内，从根源避免削波失真。

3. 可选：限制同时播放的音频数量 #

如果担心音频数量过多导致音量过低，可以设置最大活跃音频数，超过时停止最早的音频或忽略新请求：

private static MAX_ACTIVE_SOUNDS = 8;

playSound(pcmData: Uint8Array) {
  if (this.activeSources.length >= AudioManager.MAX_ACTIVE_SOUNDS) {
    // 停止最早的音频
    const oldestSource = this.activeSources.shift();
    oldestSource?.stop();
  }
  // 后续逻辑同上
}

为什么单独/顺序播放没问题？ #

单个音频在正确归一化后，幅度处于[-1.0, 1.0]的安全范围，不会触发削波；顺序播放时同一时间只有一个音频在输出，自然不存在叠加超标的情况。

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