語音對話前端全鏈路WebRTC 采集、流式 ASR 與 TTS 的工程落地一、邊說邊聽的難題語音 AI 助手的實時性與打斷困境去年我們給一個車載語音助手做前端驗收時產品提了一條用戶說話中途改主意要能立刻打斷 AIAI 必須閉嘴聽新指令。這事我見過太多團隊栽進去把語音對話做成「錄音→轉寫→大模型→合成→播放」的串行流水線。用戶每說一句要等 AI 念完才能繼續(xù)體驗像在對講機里聊天。語音 AI 助手與文本對話最大的不同在于「說」與「聽」必須并行。人類對話中打斷是常態(tài)平均每三次對話就有一次發(fā)生重疊語音。若助手還在播放上一句 TTS 時用戶已經開口補充前端必須立刻停掉播放、切回采集狀態(tài)、把新語音送進 ASR。任何一環(huán)延遲用戶就會重復喊停、停、停。全鏈路由四段組成WebRTC 采集音頻流、ASR 實時轉寫為文本、大模型流式生成回復、TTS 流式合成并播放。任意一段阻塞整條鏈路的實時性就崩塌。前端要同時管理錄音狀態(tài)、VAD語音活動檢測靜音判斷、回聲消除、打斷重置還要在弱網下做重試與降級。更要命的是流式分塊。ASR 不是等用戶說完才返回而是邊說邊吐增量文本TTS 也不是等大模型寫完整句才合成而是拿到一個分句就立刻轉音頻。前端要把這些分塊拼接、緩沖、按序播放任何錯序都會讓用戶聽到「卡帶式」的斷續(xù)語音。于是語音對話前端的本質是一個跨四段管道的狀態(tài)機調度器。二、全鏈路狀態(tài)機與流式分塊ASR 與 TTS 的協(xié)同機制整個對話周期可以建模為一個有限狀態(tài)機空閑idle、聆聽中l(wèi)istening、思考中thinking、播報中speaking。狀態(tài)轉移由兩類事件驅動用戶端的 VAD 信號開始說話、靜音超時與服務端的流式消息ASR 增量、LLM token、TTS 音頻塊。VAD 是狀態(tài)機的核心傳感器。它持續(xù)分析麥克風輸入的能量與過零率判斷當前是否有人說話。開始說話時切到 listening檢測到一段靜音通常 600 到 800 毫秒則認為句子結束切到 thinking。靜音閾值不能太短否則說話中的正常停頓會被誤判為結束也不能太長否則響應延遲被拉大。打斷處理依賴一個關鍵能力回聲消除。TTS 播放的音頻會被麥克風重新采集若不做消除VAD 會誤以為「用戶在說話」從而自我打斷。瀏覽器 WebRTC 的 getUserMedia 配合 echoCancellation 約束能消除一部分回聲但外放場景下仍需軟件 AEC 兜底。檢測到真實用戶語音能量持續(xù)高于閾值且非回聲時立刻終止 TTS 播放、清空待播隊列、切回 listening。流式 ASR 通常基于 WebSocket 傳輸?？蛻舳顺掷m(xù)發(fā)送音頻分塊16kHz PCM每幀約 20 到 40 毫秒服務端返回增量識別結果帶isFinal標記區(qū)分中間幀與句子邊界。中間幀會反復修正前面的文本前端要按句子 ID 做冪等替換不能直接追加。流式 TTS 則把大模型的文本輸出按標點切分句每拿到一個完整分句就請求合成返回的音頻塊按序進入播放隊列。瀏覽器 AudioContext 的調度機制能保證塊間無縫銜接前一塊播完時下一塊已經在緩沖區(qū)就緒。綜上語音對話鏈路最脆弱處在打斷清理舊 TTS 音頻塊可能還在 WebSocket 管道里飛前端必須用遞增 sessionId 標記每次對話過期 session 的音頻塊直接丟棄否則用戶會聽到半句舊回復突然冒出來。把這條清理守住對話才能真正「隨時打斷」。三、生產級語音對話控制器實現(xiàn)下面給出一個語音對話控制器的核心實現(xiàn)。它管理狀態(tài)機、VAD 觸發(fā)、流式 ASR 與 TTS 的分塊處理并內置打斷清理與異常重試。type DialogState idle | listening | thinking | speaking; interface VoiceControllerOptions { asrUrl: string; // 流式 ASR 的 WebSocket 地址 ttsUrl: string; // 流式 TTS 的 HTTP 地址 vadSilenceMs?: number; // 靜音判定閾值默認 700ms retryLimit?: number; // 鏈路失敗重試次數(shù) } export class VoiceDialogController { private state: DialogState idle; private sessionId 0; // 每次對話遞增用于過期數(shù)據(jù)丟棄 private audioCtx: AudioContext | null null; private mediaStream: MediaStream | null null; private asrSocket: WebSocket | null null; private ttsQueue: AudioBuffer[] []; // 待播音頻隊列 private retryCount 0; constructor(private opts: VoiceControllerOptions) {} async start() { // 采集音頻開啟回聲消除與噪聲抑制這是語音對話能跑通的前提 this.mediaStream await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true, channelCount: 1, sampleRate: 16000, }, }); this.audioCtx new AudioContext(); this.transitionTo(listening); this.connectASR(); this.startVAD(); } private connectASR() { // ASR 連接失敗需重試但重試要有上限避免弱網下無限重連 this.asrSocket new WebSocket(this.opts.asrUrl); this.asrSocket.binaryType arraybuffer; this.asrSocket.onopen () { this.retryCount 0; this.startStreamingAudio(); }; this.asrSocket.onmessage (ev) this.handleASRMessage(ev.data); this.asrSocket.onclose () { if (this.state ! idle this.retryCount (this.opts.retryLimit ?? 3)) { this.retryCount; // 指數(shù)退避重連避免服務端剛恢復就被打爆 setTimeout(() this.connectASR(), 300 * 2 ** this.retryCount); } }; this.asrSocket.onerror () this.asrSocket?.close(); } private startStreamingAudio() { if (!this.mediaStream || !this.asrSocket || !this.audioCtx) return; // 用 Web Audio 的 ScriptProcessorNode 做分幀每幀送 ASR const source this.audioCtx.createMediaStreamSource(this.mediaStream); const processor this.audioCtx.createScriptProcessor(4096, 1, 1); processor.onaudioprocess (e) { if (this.asrSocket?.readyState WebSocket.OPEN) { const pcm e.inputBuffer.getChannelData(0); // 轉 16bit PCM符合多數(shù) ASR 服務端的輸入約定 const buf floatTo16BitPCM(pcm); this.asrSocket.send(buf.buffer); } }; source.connect(processor); processor.connect(this.audioCtx.destination); } private handleASRMessage(data: string) { const msg JSON.parse(data); if (msg.isFinal msg.text.trim()) { this.transitionTo(thinking); this.callLLM(msg.text); } } private async callLLM(query: string) { const currentSession this.sessionId; // 流式請求大模型按句切分后送 TTS const resp await fetch(/api/llm/stream, { method: POST, body: JSON.stringify({ query }), }); const reader resp.body!.getReader(); const decoder new TextDecoder(); let pending ; while (true) { const { done, value } await reader.read(); if (done) break; pending decoder.decode(value, { stream: true }); // 按標點切句拿到完整分句立刻合成不等整段寫完 const sentences pending.split(/(?[。])/); pending sentences.pop() ?? ; for (const s of sentences) { if (s.trim()) await this.requestTTS(s.trim(), currentSession); } } } private async requestTTS(text: string, session: number) { try { const resp await fetch(this.opts.ttsUrl, { method: POST, body: JSON.stringify({ text, session }), }); const arrBuf await resp.arrayBuffer(); const audioBuf await this.audioCtx!.decodeAudioData(arrBuf); // 過期 session 的音頻直接丟棄這是打斷不串音的關鍵 if (session ! this.session) return; this.ttsQueue.push(audioBuf); if (this.state ! speaking) this.playQueue(session); } catch (err) { // 單句合成失敗不致命跳過繼續(xù)避免整段對話卡死 console.warn([tts], err); } } private playQueue(session: number) { if (session ! this.session) return; const buf this.ttsQueue.shift(); if (!buf) { // 隊列空且仍在 speaking說明還有未到的 TTS 塊保持狀態(tài) if (this.state speaking) return; this.transitionTo(idle); return; } this.transitionTo(speaking); const src this.audioCtx!.createBufferSource(); src.buffer buf; src.connect(this.audioCtx!.destination); src.onended () this.playQueue(session); src.start(); } private startVAD() { // 簡化 VAD監(jiān)測 RMS 能量超閾值認為有人說話 // 生產實現(xiàn)建議用 rnnoise 或 ricky0123/vad-web let silenceTimer: number | undefined; const analyser this.audioCtx!.createAnalyser(); analyser.fftSize 512; const data new Uint8Array(analyser.frequencyBinCount); const tick () { analyser.getByteFrequencyData(data); const rms data.reduce((a, b) a b * b, 0) / data.length; if (rms 100) { // 檢測到語音若正在 speaking觸發(fā)打斷 if (this.state speaking) this.interrupt(); clearTimeout(silenceTimer); } else if (this.state listening) { // 靜音超時判定句子結束 clearTimeout(silenceTimer); silenceTimer window.setTimeout(() { if (this.state listening) this.transitionTo(thinking); }, this.opts.vadSilenceMs ?? 700); } requestAnimationFrame(tick); }; tick(); } private interrupt() { // 打斷核心遞增 session 讓所有在途 TTS 作廢清空播放隊列 this.sessionId; this.ttsQueue []; this.transitionTo(listening); } private transitionTo(next: DialogState) { this.state next; } stop() { this.interrupt(); this.asrSocket?.close(); this.mediaStream?.getTracks().forEach((t) t.stop()); this.audioCtx?.close(); this.transitionTo(idle); } } function floatTo16BitPCM(input: Float32Array): Int16Array { const out new Int16Array(input.length); for (let i 0; i input.length; i) { const s Math.max(-1, Math.min(1, input[i])); out[i] s 0 ? s * 0x8000 : s * 0x7fff; } return out; }關鍵點有四處。其一sessionId 遞增機制是打斷不串音的根本保障過期 session 的 TTS 塊到達即丟棄。其二ASR WebSocket 斷線做指數(shù)退避重連弱網下不會無限打爆服務端。其三大模型輸出按標點切句后立刻送 TTS不必等整段完成首字延遲顯著降低。其四VAD 與 TTS 播放共享同一能量檢測檢測到真實語音立刻 interrupt。四、實時性與準確性的權衡回聲、打斷與適用邊界語音對話前端不是全場景通吃?；芈曄亲畲蟮墓こ炭印g覽器原生的 echoCancellation 在耳機場景下效果良好一旦外放就會泄漏。某車載項目外放時 TTS 每播一句就被自己的聲音打斷最后不得不再加一層基于參考信號的軟件 AEC工期多花了兩周。若產品形態(tài)不強制外放優(yōu)先引導用戶戴耳機能省掉一半麻煩。VAD 的靜音閾值是體驗的調節(jié)閥。設短了用戶思考時的停頓會被誤判為句子結束AI 搶答設長了響應延遲變大用戶覺得慢半拍。不同場景的最佳值差異巨大指令式對話 400 毫秒即可長陳述場景要 1000 毫秒以上。這個參數(shù)必須做成可配置不能寫死。流式 TTS 的分句策略也有代價。按標點切句雖然快但遇到長定語無標點句子會等到大模型輸出很久才出第一句音頻首字延遲反而劣化。部分實現(xiàn)改為按 token 數(shù)量切塊但又會把語義切半TTS 合成的語調在斷點處不自然。需在延遲與自然度間取舍。適用邊界指令式助手、車載語音、智能硬件對話場景收益最高這些場景對實時性與打斷容忍度要求嚴苛。純朗讀類如新聞播報、低頻問答類產品用流式 TTS 收益有限反而增加復雜度。移動端 Safari 對 AudioContext 與 WebSocket 的限制較多需做兼容性兜底。結論語音對話前端的本質是跨四段管道的狀態(tài)機調度核心是「邊說邊聽」與「打斷即?！埂Ｂ涞亟ㄗh第一用 VAD 驅動狀態(tài)機靜音閾值按場景可配置。第二ASR 走 WebSocket 流式斷線指數(shù)退避重連。第三大模型輸出按句切分送 TTS降低首字延遲。第四sessionId 遞增機制保證打斷時過期 TTS 塊被丟棄不串音。第五回聲消除優(yōu)先靠原生能力外放場景補軟件 AEC。最終在實時性、準確性與復雜度之間取得平衡。這條路在指令式語音助手場景下能跑通回報是值得的。