如何无需等待获取完成即可播放分块音频文件？

完全可以借助MediaSource (MSE) 实现超长音频的边下边播，你遇到的「等待整个文件加载」问题，大概率是以下几个核心环节没处理对：

关键问题排查与解决方案 #

1. 必须使用流式读取分块响应 #

分块传输编码的响应是流形式，不能用普通的fetch+await response.arrayBuffer()（这种会等整个响应完成），必须用ReadableStream逐块拉取数据：

• 调用response.body.getReader()获取流读取器
• 每读取一块数据，就立即喂给MediaSource，而非等待全量数据

2. 音频文件必须是流式友好的格式 #

普通MP4的元数据（moov box）在文件末尾，播放器必须等全文件加载才能解析轨道信息，这是最常见的坑：

• 必须将音频转成碎片化MP4 (fMP4)，这种格式的元数据在文件开头，拿到第一块就能解析播放
• 如果你用Opus编码，确保容器是fMP4，MIME类型设为audio/mp4; codecs="opus"

3. MediaSource的喂流逻辑要正确 #

• 监听sourceopen事件后再创建SourceBuffer，不要提前初始化
• 必须等SourceBuffer的updateend事件触发后，再喂下一块数据（避免缓冲冲突）
• 可设置缓冲阈值：比如当缓冲时长超过10秒时暂停拉取，低于5秒再继续，防止内存占用过高

极简可运行示例代码 #

const audio = document.getElementById('audio-player');
const mediaSource = new MediaSource();
audio.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {
  // 匹配你的音频编码与容器的MIME类型
  const sourceBuffer = mediaSource.addSourceBuffer('audio/mp4; codecs="opus"');
  const response = await fetch('/your-chunked-audio-endpoint');
  const reader = response.body.getReader();
  let isStreamDone = false;

  const processNextChunk = async () => {
    const { value: chunk, done: readerDone } = await reader.read();
    isStreamDone = readerDone;

    if (chunk && !sourceBuffer.updating) {
      try {
        sourceBuffer.appendBuffer(chunk);
      } catch (err) {
        // 缓冲满时，等待当前块处理完成后再重试
        sourceBuffer.addEventListener('updateend', processNextChunk, { once: true });
        return;
      }
    }

    if (!isStreamDone) {
      // 等待当前块处理完成后，继续拉取下一块
      if (sourceBuffer.updating) {
        sourceBuffer.addEventListener('updateend', processNextChunk, { once: true });
      } else {
        processNextChunk();
      }
    } else {
      mediaSource.endOfStream();
    }
  };

  processNextChunk();
});

替代方案（无需MSE） #

如果不需要精细控制缓冲，现代浏览器原生支持直接播放分块传输的流式音频：

• 直接将audio.src指向你的分块传输音频URL
• 前提是音频格式为流式友好型（fMP4、OGG Skeleton、WEBM）

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