Web Audio API流式播放WAV文件时源切换存在过渡音问题求助

问题1：相邻音频块衔接处的细微杂音 #

你当前依赖onended事件触发下一个音频源的方式，容易因为事件调度延迟、音频块首尾采样值不连续产生杂音。可以从两个方向解决：

1. 提前精准调度下一个音频源的播放时间 #

不要等onended事件触发再启动下一个源，而是基于当前音频的时长，提前计算启动时间，用start(when)无缝衔接：

const context = new (window.AudioContext || window.webkitAudioContext)();
// 假设第一个音频块的buffer为sourceBuffer1
const duration1 = sourceBuffer1.duration;
const source1 = context.createBufferSource();
source1.buffer = sourceBuffer1;
source1.connect(context.destination);
source1.start();

// 提前0.001秒启动下一个源，规避调度间隙
const source2 = context.createBufferSource();
source2.buffer = sourceBuffer2;
source2.connect(context.destination);
source2.start(context.currentTime + duration1 - 0.001);

source2.onended = () => {
  const duration2 = sourceBuffer2.duration;
  const source3 = context.createBufferSource();
  source3.buffer = sourceBuffer3;
  source3.connect(context.destination);
  source3.start(context.currentTime + duration2 - 0.001);
};

2. 给音频块首尾添加淡入淡出 #

对每个音频块的首尾10ms采样值做线性平滑，消除电平突变：

function applyFade(buffer) {
  const channelCount = buffer.numberOfChannels;
  const fadeLength = Math.round(buffer.sampleRate * 0.01); // 10ms淡入淡出时长
  for (let i = 0; i < channelCount; i++) {
    const channelData = buffer.getChannelData(i);
    
    // 淡入处理
    for (let j = 0; j < fadeLength; j++) {
      channelData[j] *= j / fadeLength;
    }
    // 淡出处理
    for (let j = channelData.length - fadeLength; j < channelData.length; j++) {
      channelData[j] *= (channelData.length - j) / fadeLength;
    }
  }
}

// 解码音频块后先处理再播放
applyFade(sourceBuffer1);
source1.start();

问题2：Firefox/Safari中预创建AudioBuffer更新后播放失效 #

Firefox和Safari对AudioBuffer的处理更严格，它本质是不可变对象——即便你用copyToChannel修改了内部数据，浏览器音频引擎可能不会感知到变化，导致重新创建的BufferSource仍使用旧缓存数据。

推荐替代方案：用ScriptProcessorNode（兼容旧浏览器）或AudioWorklet（现代方案）流式播放 #

ScriptProcessorNode 示例（兼容多数浏览器）

const context = new (window.AudioContext || window.webkitAudioContext)();
// 创建音频处理器，缓冲区大小4096，输入输出均为2通道
const processor = context.createScriptProcessor(4096, 2, 2);
processor.connect(context.destination);

let audioQueue = []; // 存储待播放的音频块

processor.onaudioprocess = (event) => {
  const outputBuffer = event.outputBuffer;
  const leftOut = outputBuffer.getChannelData(0);
  const rightOut = outputBuffer.getChannelData(1);
  
  let offset = 0;
  // 从队列中取数据填充输出缓冲区
  while (offset < 4096 && audioQueue.length > 0) {
    const currentChunk = audioQueue[0];
    const leftChunk = currentChunk.getChannelData(0);
    const rightChunk = currentChunk.getChannelData(1);
    const copyLen = Math.min(4096 - offset, leftChunk.length);
    
    // 复制数据到输出通道
    leftOut.set(leftChunk.subarray(0, copyLen), offset);
    rightOut.set(rightChunk.subarray(0, copyLen), offset);
    
    offset += copyLen;
    
    // 处理剩余数据
    if (copyLen === leftChunk.length) {
      audioQueue.shift(); // 块用完则移出队列
    } else {
      // 保留剩余数据到队列头部
      const remainingBuffer = context.createBuffer(2, leftChunk.length - copyLen, context.sampleRate);
      remainingBuffer.copyToChannel(leftChunk.subarray(copyLen), 0);
      remainingBuffer.copyToChannel(rightChunk.subarray(copyLen), 1);
      audioQueue[0] = remainingBuffer;
    }
  }
  
  // 队列空时填充静音
  while (offset < 4096) {
    leftOut[offset] = 0;
    rightOut[offset] = 0;
    offset++;
  }
};

// 加载音频块后加入播放队列
function addAudioChunk(buffer) {
  audioQueue.push(buffer);
}

AudioWorklet 方案（现代浏览器推荐）

AudioWorklet是ScriptProcessorNode的替代方案，性能更优，需单独创建工作脚本文件。核心逻辑是将加载的音频块数据发送到Worklet，由Worklet实时输出音频，既避免衔接问题，也完美兼容Firefox和Safari。

若坚持使用预创建Buffer方式 #

每次更新数据后，不要复用原audiobuf，而是创建新的AudioBuffer合并已有数据与新数据：

// 假设原有数据存在oldBuffer，新数据为newBuffer
const totalLength = oldBuffer.length + newBuffer.length;
const newFullBuffer = context.createBuffer(oldBuffer.numberOfChannels, totalLength, context.sampleRate);

// 复制旧数据
for (let i = 0; i < oldBuffer.numberOfChannels; i++) {
  newFullBuffer.copyToChannel(oldBuffer.getChannelData(i), i);
}
// 复制新数据到偏移位置
for (let i = 0; i < newBuffer.numberOfChannels; i++) {
  newFullBuffer.copyToChannel(newBuffer.getChannelData(i), i, oldBuffer.length);
}

// 使用新Buffer创建播放源
const source = context.createBufferSource();
source.buffer = newFullBuffer;
source.connect(context.destination);
source.start();

此方式仅适合小文件，大文件会占用过多内存，不推荐。

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