博客 / 詳情

返回

在 Web 前端實現流式 TTS 播放

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

🧠 在 Web 前端實現流式 TTS 播放:從卡頓雜音到絲滑順暢的演進之路

在做前端實時語音合成(TTS)時,很多人都會遇到同樣的問題:

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

本文將帶你走一遍真實的排坑過程,最終用一種優雅的方式在瀏覽器中實現 低延遲、不卡頓、無雜音 的流式 TTS 播放。


💥 問題的起點:AudioBufferSourceNode 方案

一開始我們採用最直觀的方式:

  1. 後端流式返回 Base64 MP3 塊
  2. 前端每收到一塊:
    • Base64 → ArrayBuffer
    • decodeAudioData() 解碼成 PCM
    • AudioBufferSourceNode 播放

聽起來沒什麼問題,但結果是:

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

這是絕大多數開發者第一次嘗試流式 TTS 時會踩的坑。


🚀 真正流暢的做法:MediaSource + SourceBuffer

後來我們換成瀏覽器原生支持的 MediaSource Extensions (MSE) 技術:

  • 創建 MediaSource 作為音頻流容器
  • mediaSource.addSourceBuffer('audio/mpeg') 聲明要接收 MP3 流
  • 每收到一塊 Base64 MP3:
    • 轉為 ArrayBuffer
    • sourceBuffer.appendBuffer(buffer) 追加到播放流
  • 瀏覽器底層會自動解碼 + 緩衝 + 拼接播放

結果立刻變得絲滑:

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


🧩 最終實現:StreamingTTSPlayer

下面是一份可直接使用的封裝類,只需傳入 Base64 MP3 數據塊,即可實現流式播放:

/**
 * StreamingTTSPlayer.ts
 * 
 * 一個用於播放「流式 Base64 MP3」音頻的播放器。
 * 使用 MediaSource + SourceBuffer 實現邊接收邊播放,不卡頓無雜音。
 */

export interface StreamingTTSPlayerOptions {
  /** 用於監聽播放器狀態(ready、error 等)的回調 */
  onEvent?: (event: string, data?: any) => void;
}

export class StreamingTTSPlayer {
  private audio: HTMLAudioElement;           // 播放用的 <audio> 元素
  private mediaSource: MediaSource;           // 媒體源(支持流式拼接)
  private sourceBuffer: SourceBuffer | null = null; // 用於接收音頻塊的緩衝區
  private queue: ArrayBuffer[] = [];          // 等待寫入 SourceBuffer 的音頻塊隊列
  private isBufferUpdating = false;            // 是否正在寫入數據(避免併發)
  private onEvent?: (event: string, data?: any) => void; // 事件回調

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

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

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

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

        // 5. 設置拼接模式為 sequence(自動按順序拼接)
        this.sourceBuffer.mode = 'sequence';

        // 6. 每次 appendBuffer 完成後觸發 updateend,繼續處理隊列
        this.sourceBuffer.addEventListener('updateend', () => this.feedQueue());

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

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

  /**
   * 接收一段 base64 MP3 數據塊並放入播放隊列
   * @param base64 base64 編碼的 MP3 數據塊
   * @param autoPlay 是否自動開始播放(默認 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();
    }
  }

  /**
   * 停止播放並清空緩衝
   * (會丟棄所有未播放的數據)
   */
  stop() {
    this.pause();
    this.queue = [];
    if (this.mediaSource.readyState === "open" && this.sourceBuffer && !this.sourceBuffer.updating) {
      try {
        this.sourceBuffer.abort(); // 終止當前的緩衝區寫入
      } catch {}
    }
    this.audio.currentTime = 0;
  }

  /**
   * 內部方法:嘗試把隊列中的數據 append 到 SourceBuffer
   */
  private feedQueue() {
    // 沒有 SourceBuffer 或正在寫入時不處理
    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 數據到播放流
        this.isBufferUpdating = false;
      } catch (err) {
        console.error("Failed to append buffer:", err);
        this.emit("error", err);
      }
    }
  }

  /**
   * Base64 -> ArrayBuffer 轉換工具
   */
  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;
  }

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

使用

const player = new StreamingTTSPlayer();

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

如果對您有所幫助,歡迎您點個關注,我會定時更新技術文檔,大家一起討論學習,一起進步。

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.