使用Web Audio API播放Base64 WAV音频时如何消除起始点击音

问题根源分析 #

你的代码里有几个关键问题导致了开头的点击声：

1. 数组越界读取：转换byteChars到byteNumbers的循环中，i <= byteChars.length会读取超出字符串长度的位置，得到undefined，转成数字后是NaN，最终在音频数据中产生异常值，引发跳变噪音。
2. 音频数据转换逻辑冗余易出错：手动处理16位有符号整数的转换时逻辑绕弯，容易出现计算错误，导致部分采样值异常。
3. 重复创建AudioContext：每次触发播放事件都新建AudioContext，既不符合最佳实践，还可能引发音频上下文的初始化冲突。

修复方案及代码 #

// 复用AudioContext，避免重复创建
let audioCtx = null;
const getAudioCtx = () => {
  if (!audioCtx) {
    const AudioContextConstructor = window.AudioContext || window.webkitAudioContext;
    audioCtx = new AudioContext({ latencyHint: 'interactive', sampleRate: 24000 });
  }
  // 上下文被挂起时恢复
  if (audioCtx.state === 'suspended') {
    audioCtx.resume();
  }
  return audioCtx;
};

socket.on('playAudio', function (msg) {
  // msg.data 是Base64字符串
  const byteChars = atob(msg.data);
  const audioCtx = getAudioCtx();
  
  // 正确转换字符串到Uint8Array，避免越界
  const byteArray = new Uint8Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteArray[i] = byteChars.charCodeAt(i);
  }
  
  // 用Int16Array直接处理小端16位PCM数据，更准确
  const int16Array = new Int16Array(byteArray.buffer);
  const frameCount = int16Array.length;
  
  const myAudioBuffer = audioCtx.createBuffer(1, frameCount, 24000);
  const nowBuffering = myAudioBuffer.getChannelData(0);
  
  // 归一化到-1.0到1.0的范围
  for (let i = 0; i < frameCount; i++) {
    nowBuffering[i] = int16Array[i] / 32768.0;
  }
  
  const source = audioCtx.createBufferSource();
  source.buffer = myAudioBuffer;
  source.connect(audioCtx.destination);
  source.start();
});

额外优化建议 #

如果修复后仍有轻微点击声，可以给音频开头添加淡入效果，避免音量从0突然跳到有效采样值：

// 在归一化循环后添加淡入处理
const fadeInSamples = Math.min(frameCount, 240); // 取10ms淡入时长（24000采样率下）
for (let i = 0; i < fadeInSamples; i++) {
  nowBuffering[i] *= (i / fadeInSamples);
}

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