VueJS应用中Web Audio API播放实时流时音频块偶尔延迟播放问题

问题 #

我正在开发一个VueJS Web应用，通过WebSocket接收音频数据，并使用Web Audio API进行实时播放。音频数据以base64编码的块形式发送，解码后添加到MediaSource的SourceBuffer中。

目前遇到的问题是：当音频时长较短时，偶尔会出现音频块已接收但无法立即播放的情况，下一组音频块接收后，之前未播放的音频才会启动，随后播放新音频块。

以下是组件中设置音频播放的代码：

initAudioSetup() {
      this.mediaSource = new MediaSource();
      const audioElement = document.getElementById("audio");
      audioElement.src = URL.createObjectURL(this.mediaSource);

      this.mediaSource.addEventListener("sourceopen", () => {
        this.sourceBuffer = this.mediaSource.addSourceBuffer("audio/mpeg");

        let queue = [];
        let isUpdating = false;

        const processQueue = () => {
          if (queue.length > 0 && !isUpdating) {
            console.log("PROCESSING QUEUE");
            isUpdating = true;

            this.sourceBuffer.appendBuffer(queue.shift());
          }
        };

        this.sourceBuffer.addEventListener("updateend", () => {
          isUpdating = false;
          processQueue();
        });

        // Listen for new audio chunks
        window.addEventListener("newAudioChunk", (event) => {
          const chunk = event.detail;
          const binaryString = atob(chunk);
          const len = binaryString.length;
          const bytes = new Uint8Array(len);
          for (let i = 0; i < len; i++) {
            bytes[i] = binaryString.charCodeAt(i);
          }
          queue.push(bytes);
          processQueue();
        });
        window.addEventListener("endOfAudio", () => {
          console.log("end of audio");
         
          console.log(this.mediaSource.sourceBuffers);
        });
      });
      audioElement.play();
    }

分析与解决方案 #

这种延迟播放的问题，核心和MediaSource对音频片段的处理逻辑、播放时机控制有关，具体可以从这几个方向排查解决：

1. 音频块的完整性问题 #

audio/mpeg（比如MP3）依赖完整的帧结构才能被解码播放。如果短音频的第一个块只包含部分帧数据，SourceBuffer会等待后续完整帧到来才触发解码，导致前面的片段延迟到下一组块到达时才一起播放。

• 解决：发送端确保每个音频块都是完整的MP3帧，或者在短音频结束时补充帧尾数据，让SourceBuffer能识别到完整的播放单元。

2. MediaSource的缓冲阈值逻辑 #

MediaSource有内部缓冲策略，当缓冲的音频数据量过小时（比如短音频总时长不足几百毫秒），浏览器会等待更多数据再启动播放，避免频繁启停。

• 解决：
  • 把audioElement.play()移到sourceopen回调内部（比如创建完SourceBuffer之后），确保MediaSource就绪后再发起播放请求；
  • 在第一个音频块append完成后的updateend事件中调用play，确保缓冲有足够数据后再触发播放。

3. 播放时机的同步问题 #

你当前在初始化时直接调用audioElement.play()，但此时sourceopen事件可能还未触发，MediaSource未就绪，这个play请求会被浏览器忽略或进入pending状态。后续新音频块到来、缓冲数据足够时，才会触发播放，同时把之前pending的音频一起播放。

• 解决：在updateend事件中检查音频播放状态，如果处于暂停且缓冲有数据，就主动触发播放：

this.sourceBuffer.addEventListener("updateend", () => {
  isUpdating = false;
  processQueue();
  // 检查并激活播放
  if (audioElement.paused && this.sourceBuffer.buffered.length > 0) {
    audioElement.play().catch(err => console.error(err));
  }
});

4. SourceBuffer队列处理的补充 #

当前队列每次仅处理一个块，短音频块可能快速处理完成，但如果播放状态未正确激活，会导致缓冲数据存在但不播放。

• 解决：在每次append完块后，主动检查播放状态，确保音频元素处于播放状态。

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