使用AudioContext合并音频Buffer实现流式播放时消除chunk停顿的技术求助

你当前的实现每次合并音频Chunk后都要停止旧的AudioBufferSourceNode，重新创建新节点并从计算的位置开始播放，这个流程存在几个导致停顿的核心问题：

• 停止旧节点到启动新节点之间存在不可避免的时间间隙
• Date.now()计算播放位置不准确，音频上下文的时间和系统时间可能存在偏差
• 合并Buffer的操作本身会占用主线程资源，进一步拉长间隙

解决方案 #

不需要合并多个AudioBuffer，而是采用多AudioBufferSourceNode无缝衔接播放的方案。核心思路是提前预加载下一个Chunk，在当前音频播放到接近末尾时，精准启动下一个节点，实现无停顿衔接。

具体实现步骤 #

1. 预加载首个Chunk并初始化播放状态
2. 并行加载后续Chunk并解码缓存，避免等待加载阻塞播放
3. 利用AudioContext.currentTime（音频上下文的精准时间）替代系统时间计算播放进度
4. 监听当前节点的onended事件，自动启动下一个Chunk的播放，实现无缝衔接

修改后的代码示例 #

import audios, { preBuffer } from "./data";
import { fetchDecode, mergeAudioBuffers } from "./utils";

const playButton = document.getElementById("play") as HTMLButtonElement;

let ctx: AudioContext;
let currentSource: AudioBufferSourceNode;
let chunkQueue: AudioBuffer[] = [];
let isPlaying = false;
let currentChunkIndex = 0;

// 预加载首个Chunk，同时并行加载后续Chunk
window.onload = async () => {
  ctx = new AudioContext();
  // 加载首个Chunk
  const firstArrayBuffer: ArrayBuffer = await fetchDecode(preBuffer);
  const firstAudioBuffer: AudioBuffer = await ctx.decodeAudioData(firstArrayBuffer);
  chunkQueue.push(firstAudioBuffer);
  
  // 并行加载剩余Chunk，不阻塞主线程
  (async () => {
    for (const audio of audios) {
      try {
        const arraybuffer = await fetchDecode(audio);
        const decodeBuffer = await ctx.decodeAudioData(arraybuffer);
        chunkQueue.push(decodeBuffer);
      } catch (err) {
        console.error("加载Chunk失败:", err);
      }
    }
  })();
};

// 播放下一个Chunk的核心函数
const playNextChunk = () => {
  if (currentChunkIndex >= chunkQueue.length) {
    // 所有Chunk播放完毕
    playButton.innerHTML = "Play";
    playButton.disabled = false;
    isPlaying = false;
    return;
  }

  const buffer = chunkQueue[currentChunkIndex];
  currentSource = ctx.createBufferSource();
  currentSource.buffer = buffer;
  currentSource.connect(ctx.destination);

  // 当前Chunk播放结束后自动触发下一个Chunk的播放
  currentSource.onended = () => {
    currentChunkIndex++;
    playNextChunk();
  };

  currentSource.start();
  currentChunkIndex++;
};

playButton.addEventListener("click", () => {
  if (isPlaying) return;
  
  isPlaying = true;
  playButton.innerHTML = "Playing";
  playButton.disabled = true;
  
  // 重置播放状态（支持重新播放）
  currentChunkIndex = 0;
  playNextChunk();
});

额外优化建议 #

• 增加预加载阈值：比如当前播放到第N个Chunk时，提前加载第N+2个Chunk，避免网络延迟导致的停顿
• 添加错误处理：对fetch和decode过程捕获异常，避免单个Chunk加载失败导致整个播放流程中断
• 支持进度拖拽：维护已加载的总音频时长，结合AudioContext.currentTime实现进度条跳转逻辑

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