如何使用Web Audio API在JavaScript中连续无缝生成原始音频采样？

原方案存在静音间隙的核心原因 #

onended回调的调度机制天然存在延迟偏差，不存在通过优化主线程代码消除的可能：

• 音频渲染运行在浏览器独立的高优先级实时线程，当AudioBufferSourceNode播完缓冲区最后一个采样时，才会将onended事件投递到主线程的任务队列
• 主线程需要等待当前执行的宏任务、微任务全部处理完成后，才会消费这个回调事件，此时音频线程已经因为没有可播放的采样输出了静音间隙
• 只要采用“等上一个播放结束再创建下一个源”的逻辑，就必然存在可感知的断流，和JS代码执行效率无关

无间隙连续播放的可落地实现路径 #

路径1：基于预排程的缓冲区拼接 #

不需要依赖事件回调触发新源创建，利用Web Audio API支持绝对时间调度的特性，在启动首个音频源时就预先算好后续所有源的启动时间，精准对齐上一个源的结束时间，从根源上规避调度延迟：

• 预先创建固定长度的短音频缓冲区，通常长度设为100-200ms即可
• 计算单个缓冲区的总播放时长，作为后续源的启动时间间隔
• 启动第一个source时记录它的精确结束时间，在首个source启动后立刻创建下一个source，指定它的启动时间严格对齐上一个source的结束点
• 始终保持一小段时间的预排程缓冲（通常提前排程300ms左右的音频），通过低优先级定时器定期补充排程后续的源，全程不会出现断流
  参考实现代码：

const bufferLength = Math.floor(audioCtx.sampleRate * 0.1);
const buffer = audioCtx.createBuffer(1, bufferLength, audioCtx.sampleRate);
const BUFFER_DURATION = bufferLength / audioCtx.sampleRate;
// 基于全局时间偏移填充采样，避免相位断层
function fillBuffer(buffer, globalStartTime) {
  const channelData = buffer.getChannelData(0);
  for (let i = 0; i < bufferLength; i++) {
    const currentTime = globalStartTime + i / audioCtx.sampleRate;
    // 替换为你自己的采样生成逻辑，示例为440Hz正弦波
    channelData[i] = Math.sin(currentTime * 440 * 2 * Math.PI) * 0.5;
  }
}
let nextScheduleTime = audioCtx.currentTime;
// 初始预排程3个缓冲块
for (let i = 0; i < 3; i++) {
  fillBuffer(buffer, nextScheduleTime);
  const source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.start(nextScheduleTime);
  nextScheduleTime += BUFFER_DURATION;
}
// 定期补充排程，始终保持0.3s的预缓冲
setInterval(() => {
  while (nextScheduleTime < audioCtx.currentTime + 0.3) {
    fillBuffer(buffer, nextScheduleTime);
    const source = audioCtx.createBufferSource();
    source.buffer = buffer;
    source.connect(audioCtx.destination);
    source.start(nextScheduleTime);
    nextScheduleTime += BUFFER_DURATION;
  }
}, 100);

路径2：使用原生AudioWorklet实现逐采样流式生成 #

这种方式完全匹配你预期的createSampleStream效果，不需要开发带C++绑定的npm包：

• AudioWorklet是浏览器原生提供的实时音频处理能力，运行在独立的音频渲染线程上，和主线程完全隔离，不存在事件循环调度的延迟问题
• 你可以直接在处理器中实现逐采样的生成逻辑，输出连续无间断的音频流，性能足以支撑专业音乐应用的需求
  参考实现：

1. 主线程侧代码，加载自定义的采样生成模块：

await audioCtx.audioWorklet.addModule('/sample-generator.js');
const sampleNode = new AudioWorkletNode(audioCtx, 'sample-generator');
sampleNode.connect(audioCtx.destination);

2. Worklet侧的处理器代码（sample-generator.js）：

class SampleGenerator extends AudioWorkletProcessor {
  process(inputs, outputs) {
    const outputChannel = outputs[0][0];
    // 逐采样填充生成内容，和你预期的回调逻辑完全一致
    for (let i = 0; i < outputChannel.length; i++) {
      // 替换为你的采样生成逻辑，示例为白噪音
      outputChannel[i] = Math.random() * 2 - 1;
    }
    return true; // 保持节点持续运行
  }
}
registerProcessor('sample-generator', SampleGenerator);

常见认知纠正 #

• AudioBufferSourceNode的单次播放限制本身不是实现连续播放的障碍，只要调整调度时机，完全可以用短缓冲区拼接出无缝的长音频流
• 旧版本使用的ScriptProcessorNode因为跑在主线程上，存在卡顿和延迟问题，已经被官方废弃，实时生成场景请优先选择AudioWorklet
• 所有依赖主线程事件回调触发的音频切换逻辑，都无法做到严格无间隙，设计时要优先考虑提前排程、独立线程运行的方案

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