如何通过Web Audio API分块下载音频并实现流畅播放？

你的现有代码需要等待音频文件完全下载并解码后才开始播放，慢网环境下等待时间过长。要实现边下载边播放且无需手动调度音频分块的效果，推荐结合MediaSource API与Web Audio API，MediaSource会自动处理分块缓冲和播放时机，无需你手动管理分块的播放调度逻辑。

实现代码 #

async function streamAudio(songUrl) {
  const audioContext = new AudioContext();
  const mediaSource = new MediaSource();
  const audioElement = new Audio();
  audioElement.src = URL.createObjectURL(mediaSource);

  // 将Audio元素接入Web Audio API处理链路
  const mediaElementSource = audioContext.createMediaElementSource(audioElement);
  mediaElementSource.connect(audioContext.destination);

  mediaSource.addEventListener('sourceopen', async () => {
    // 根据音频格式设置正确的MIME类型，例如MP3用audio/mpeg，AAC用audio/mp4; codecs="mp4a.40.2"
    const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
    const response = await fetch(songUrl);
    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        mediaSource.endOfStream();
        break;
      }
      // 等待缓冲区空闲后写入新数据
      while (sourceBuffer.updating) {
        await new Promise(resolve => setTimeout(resolve, 10));
      }
      sourceBuffer.appendBuffer(value);
    }
  });

  // 处理浏览器自动暂停限制，需确保在用户交互上下文内调用
  await audioContext.resume();
  audioElement.play().catch(err => console.error('播放失败:', err));
}

// 调用示例
streamAudio('你的CDN音频文件地址');

关键说明 #

• 流式处理逻辑：通过fetch获取音频的可读流（ReadableStream），分块写入MediaSource的SourceBuffer，浏览器会自动缓冲并播放已下载的音频片段，无需手动调度分块播放。
• Web Audio集成：使用createMediaElementSource将流式播放的Audio元素接入Web Audio API，既保留流式播放能力，又能利用Web Audio的各种音频处理功能。
• MIME类型匹配：必须设置与音频文件一致的MIME类型，否则无法正常解码播放。
• 浏览器交互限制：现代浏览器要求音频播放必须由用户交互触发（如点击、触摸事件），需确保play()或audioContext.resume()调用在用户交互回调中执行。

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