快捷導(dǎo)航

在Web前端實(shí)現(xiàn)流式TTS播放的排坑過程

更新時(shí)間：2026年05月22日 09:54:46 作者：晚星star

在前端實(shí)現(xiàn)流式TTS,核心目標(biāo)是把文本輸入轉(zhuǎn)化為沉浸式的、幾乎無感延遲的音頻輸出,并且在音頻進(jìn)入瀏覽器的瞬間就能開始播放,這篇文章主要介紹了在Web前端實(shí)現(xiàn)流式TTS播放的排坑過程,需要的朋友可以參考下

前言

在做前端實(shí)時(shí)語音合成（TTS）時(shí)，很多人都會(huì)遇到同樣的問題：

播放出來的語音一頓一頓的，很卡頓
聲音中夾雜“咔嗒”聲、雜音、斷裂
明明音頻格式是 MP3，也無法做到“接收到就播放”

本文將帶你走一遍真實(shí)的排坑過程，最終用一種優(yōu)雅的方式在瀏覽器中實(shí)現(xiàn) 低延遲、不卡頓、無雜音 的流式 TTS 播放。

問題的起點(diǎn)：AudioBufferSourceNode 方案

一開始我們采用最直觀的方式：

后端流式返回 Base64 MP3 塊
前端每收到一塊：
- Base64 → ArrayBuffer
- 用 decodeAudioData() 解碼成 PCM
- 用 AudioBufferSourceNode 播放

聽起來沒什么問題，但結(jié)果是：

頻繁卡頓：每次解碼都要等主線程空閑，播放中途就被打斷
雜音爆音：每塊是獨(dú)立的 AudioNode，時(shí)間軸無法無縫拼接
延遲明顯：必須解碼完成才能播，沒法“邊下邊播”

這是絕大多數(shù)開發(fā)者第一次嘗試流式 TTS 時(shí)會(huì)踩的坑。

真正流暢的做法：MediaSource + SourceBuffer

后來我們換成瀏覽器原生支持的 MediaSource Extensions (MSE) 技術(shù)：

創(chuàng)建 MediaSource 作為音頻流容器
mediaSource.addSourceBuffer('audio/mpeg') 聲明要接收 MP3 流
每收到一塊 Base64 MP3：
- 轉(zhuǎn)為 ArrayBuffer
- sourceBuffer.appendBuffer(buffer) 追加到播放流
瀏覽器底層會(huì)自動(dòng)解碼 + 緩沖 + 拼接播放

結(jié)果立刻變得絲滑：

? 接收即播，低延遲
? 無縫拼接，無雜音
? 不再卡頓，性能極佳
? 兼容所有現(xiàn)代瀏覽器（Chrome / Edge / Firefox / Safari）

最終實(shí)現(xiàn)：StreamingTTSPlayer

下面是一份可直接使用的封裝類，只需傳入 Base64 MP3 數(shù)據(jù)塊，即可實(shí)現(xiàn)流式播放：

/**
 * StreamingTTSPlayer.ts
 * 
 * 一個(gè)用于播放「流式 Base64 MP3」音頻的播放器。
 * 使用 MediaSource + SourceBuffer 實(shí)現(xiàn)邊接收邊播放，不卡頓無雜音。
 */

export interface StreamingTTSPlayerOptions {
  /** 用于監(jiān)聽播放器狀態(tài)（ready、error 等）的回調(diào) */
  onEvent?: (event: string, data?: any) => void;
}

export class StreamingTTSPlayer {
  private audio: HTMLAudioElement;           // 播放用的 <audio> 元素
  private mediaSource: MediaSource;           // 媒體源（支持流式拼接）
  private sourceBuffer: SourceBuffer | null = null; // 用于接收音頻塊的緩沖區(qū)
  private queue: ArrayBuffer[] = [];          // 等待寫入 SourceBuffer 的音頻塊隊(duì)列
  private isBufferUpdating = false;            // 是否正在寫入數(shù)據(jù)（避免并發(fā)）
  private onEvent?: (event: string, data?: any) => void; // 事件回調(diào)

  constructor(options?: StreamingTTSPlayerOptions) {
    this.onEvent = options?.onEvent;

    // 1. 創(chuàng)建 HTMLAudioElement
    this.audio = new Audio();

    // 2. 創(chuàng)建 MediaSource 并掛載到 audio 元素
    this.mediaSource = new MediaSource();
    this.audio.src = URL.createObjectURL(this.mediaSource);

    // 3. 等待 mediaSource 初始化完成
    this.mediaSource.addEventListener("sourceopen", () => {
      try {
        // 4. 創(chuàng)建一個(gè) MP3 類型的 SourceBuffer，用于接收音頻塊
        this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/mpeg');

        // 5. 設(shè)置拼接模式為 sequence（自動(dòng)按順序拼接）
        this.sourceBuffer.mode = 'sequence';

        // 6. 每次 appendBuffer 完成后觸發(fā) updateend，繼續(xù)處理隊(duì)列
        this.sourceBuffer.addEventListener('updateend', () => this.feedQueue());

        this.emit("ready");
      } catch (err) {
        console.error("Failed to add sourceBuffer:", err);
        this.emit("error", err);
      }
    });

    // 監(jiān)聽 audio 元素播放錯(cuò)誤
    this.audio.addEventListener("error", (e) => {
      this.emit("error", e);
    });
  }

  /**
   * 接收一段 base64 MP3 數(shù)據(jù)塊并放入播放隊(duì)列
   * @param base64 base64 編碼的 MP3 數(shù)據(jù)塊
   * @param autoPlay 是否自動(dòng)開始播放（默認(rèn) true）
   */
  receiveBase64(base64: string, autoPlay = true) {
    try {
      const buffer = this.base64ToArrayBuffer(base64);
      this.queue.push(buffer);
      this.feedQueue(); // 立即嘗試送入 SourceBuffer
      if (autoPlay) this.play();
    } catch (err) {
      console.error("TTS decode error:", err);
      this.emit("error", err);
    }
  }

  /** 播放（如果已暫停） */
  play() {
    if (this.audio.paused) {
      this.audio.play().catch(() => {});
    }
  }

  /** 暫停播放 */
  pause() {
    if (!this.audio.paused) {
      this.audio.pause();
    }
  }

  /**
   * 停止播放并清空緩沖
   * （會(huì)丟棄所有未播放的數(shù)據(jù)）
   */
  stop() {
    this.pause();
    this.queue = [];
    if (this.mediaSource.readyState === "open" && this.sourceBuffer && !this.sourceBuffer.updating) {
      try {
        this.sourceBuffer.abort(); // 終止當(dāng)前的緩沖區(qū)寫入
      } catch {}
    }
    this.audio.currentTime = 0;
  }

  /**
   * 內(nèi)部方法：嘗試把隊(duì)列中的數(shù)據(jù) append 到 SourceBuffer
   */
  private feedQueue() {
    // 沒有 SourceBuffer 或正在寫入時(shí)不處理
    if (!this.sourceBuffer || this.isBufferUpdating) return;
    if (this.queue.length === 0) return;

    if (!this.sourceBuffer.updating) {
      const chunk = this.queue.shift()!;
      try {
        this.isBufferUpdating = true;
        this.sourceBuffer.appendBuffer(chunk); // 核心：追加 MP3 數(shù)據(jù)到播放流
        this.isBufferUpdating = false;
      } catch (err) {
        console.error("Failed to append buffer:", err);
        this.emit("error", err);
      }
    }
  }

  /**
   * Base64 -> ArrayBuffer 轉(zhuǎn)換工具
   */
  private base64ToArrayBuffer(base64: string): ArrayBuffer {
    const binary = atob(base64.replace(/^data:audio\/\w+;base64,/, ""));
    const len = binary.length;
    const buffer = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      buffer[i] = binary.charCodeAt(i);
    }
    return buffer.buffer;
  }

  /** 觸發(fā)事件回調(diào) */
  private emit(event: string, data?: any) {
    this.onEvent?.(event, data);
  }
}

使用

const player = new StreamingTTSPlayer();

// 每收到一塊 TTS 音頻數(shù)據(jù)就塞進(jìn)去
ws.onmessage = (e) => {
  const data = JSON.parse(e.data);
  if (data.audio) player.receiveBase64(data.audio);
};