🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
🧠 在 Web 前端實現流式 TTS 播放:從卡頓雜音到絲滑順暢的演進之路
在做前端實時語音合成(TTS)時,很多人都會遇到同樣的問題:
- 播放出來的語音一頓一頓的,很卡頓
- 聲音中夾雜“咔嗒”聲、雜音、斷裂
- 明明音頻格式是 MP3,也無法做到“接收到就播放”
本文將帶你走一遍真實的排坑過程,最終用一種優雅的方式在瀏覽器中實現 低延遲、不卡頓、無雜音 的流式 TTS 播放。
💥 問題的起點:AudioBufferSourceNode 方案
一開始我們採用最直觀的方式:
- 後端流式返回 Base64 MP3 塊
- 前端每收到一塊:
- 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);
};