語(yǔ)音對(duì)話前端全鏈路WebRTC 采集、流式 ASR 與 TTS 的工程落地一、邊說(shuō)邊聽(tīng)的難題語(yǔ)音 AI 助手的實(shí)時(shí)性與打斷困境去年我們給一個(gè)車載語(yǔ)音助手做前端驗(yàn)收時(shí)產(chǎn)品提了一條用戶說(shuō)話中途改主意要能立刻打斷 AIAI 必須閉嘴聽(tīng)新指令。這事我見(jiàn)過(guò)太多團(tuán)隊(duì)栽進(jìn)去把語(yǔ)音對(duì)話做成「錄音→轉(zhuǎn)寫(xiě)→大模型→合成→播放」的串行流水線。用戶每說(shuō)一句要等 AI 念完才能繼續(xù)體驗(yàn)像在對(duì)講機(jī)里聊天。語(yǔ)音 AI 助手與文本對(duì)話最大的不同在于「說(shuō)」與「聽(tīng)」必須并行。人類對(duì)話中打斷是常態(tài)平均每三次對(duì)話就有一次發(fā)生重疊語(yǔ)音。若助手還在播放上一句 TTS 時(shí)用戶已經(jīng)開(kāi)口補(bǔ)充前端必須立刻停掉播放、切回采集狀態(tài)、把新語(yǔ)音送進(jìn) ASR。任何一環(huán)延遲用戶就會(huì)重復(fù)喊停、停、停。全鏈路由四段組成WebRTC 采集音頻流、ASR 實(shí)時(shí)轉(zhuǎn)寫(xiě)為文本、大模型流式生成回復(fù)、TTS 流式合成并播放。任意一段阻塞整條鏈路的實(shí)時(shí)性就崩塌。前端要同時(shí)管理錄音狀態(tài)、VAD語(yǔ)音活動(dòng)檢測(cè)靜音判斷、回聲消除、打斷重置還要在弱網(wǎng)下做重試與降級(jí)。更要命的是流式分塊。ASR 不是等用戶說(shuō)完才返回而是邊說(shuō)邊吐增量文本TTS 也不是等大模型寫(xiě)完整句才合成而是拿到一個(gè)分句就立刻轉(zhuǎn)音頻。前端要把這些分塊拼接、緩沖、按序播放任何錯(cuò)序都會(huì)讓用戶聽(tīng)到「卡帶式」的斷續(xù)語(yǔ)音。于是語(yǔ)音對(duì)話前端的本質(zhì)是一個(gè)跨四段管道的狀態(tài)機(jī)調(diào)度器。二、全鏈路狀態(tài)機(jī)與流式分塊ASR 與 TTS 的協(xié)同機(jī)制整個(gè)對(duì)話周期可以建模為一個(gè)有限狀態(tài)機(jī)空閑idle、聆聽(tīng)中l(wèi)istening、思考中thinking、播報(bào)中speaking。狀態(tài)轉(zhuǎn)移由兩類事件驅(qū)動(dòng)用戶端的 VAD 信號(hào)開(kāi)始說(shuō)話、靜音超時(shí)與服務(wù)端的流式消息ASR 增量、LLM token、TTS 音頻塊。VAD 是狀態(tài)機(jī)的核心傳感器。它持續(xù)分析麥克風(fēng)輸入的能量與過(guò)零率判斷當(dāng)前是否有人說(shuō)話。開(kāi)始說(shuō)話時(shí)切到 listening檢測(cè)到一段靜音通常 600 到 800 毫秒則認(rèn)為句子結(jié)束切到 thinking。靜音閾值不能太短否則說(shuō)話中的正常停頓會(huì)被誤判為結(jié)束也不能太長(zhǎng)否則響應(yīng)延遲被拉大。打斷處理依賴一個(gè)關(guān)鍵能力回聲消除。TTS 播放的音頻會(huì)被麥克風(fēng)重新采集若不做消除VAD 會(huì)誤以為「用戶在說(shuō)話」從而自我打斷。瀏覽器 WebRTC 的 getUserMedia 配合 echoCancellation 約束能消除一部分回聲但外放場(chǎng)景下仍需軟件 AEC 兜底。檢測(cè)到真實(shí)用戶語(yǔ)音能量持續(xù)高于閾值且非回聲時(shí)立刻終止 TTS 播放、清空待播隊(duì)列、切回 listening。流式 ASR 通?；?WebSocket 傳輸?？蛻舳顺掷m(xù)發(fā)送音頻分塊16kHz PCM每幀約 20 到 40 毫秒服務(wù)端返回增量識(shí)別結(jié)果帶isFinal標(biāo)記區(qū)分中間幀與句子邊界。中間幀會(huì)反復(fù)修正前面的文本前端要按句子 ID 做冪等替換不能直接追加。流式 TTS 則把大模型的文本輸出按標(biāo)點(diǎn)切分句每拿到一個(gè)完整分句就請(qǐng)求合成返回的音頻塊按序進(jìn)入播放隊(duì)列。瀏覽器 AudioContext 的調(diào)度機(jī)制能保證塊間無(wú)縫銜接前一塊播完時(shí)下一塊已經(jīng)在緩沖區(qū)就緒。綜上語(yǔ)音對(duì)話鏈路最脆弱處在打斷清理舊 TTS 音頻塊可能還在 WebSocket 管道里飛前端必須用遞增 sessionId 標(biāo)記每次對(duì)話過(guò)期 session 的音頻塊直接丟棄否則用戶會(huì)聽(tīng)到半句舊回復(fù)突然冒出來(lái)。把這條清理守住對(duì)話才能真正「隨時(shí)打斷」。三、生產(chǎn)級(jí)語(yǔ)音對(duì)話控制器實(shí)現(xiàn)下面給出一個(gè)語(yǔ)音對(duì)話控制器的核心實(shí)現(xiàn)。它管理狀態(tài)機(jī)、VAD 觸發(fā)、流式 ASR 與 TTS 的分塊處理并內(nèi)置打斷清理與異常重試。type DialogState idle | listening | thinking | speaking; interface VoiceControllerOptions { asrUrl: string; // 流式 ASR 的 WebSocket 地址 ttsUrl: string; // 流式 TTS 的 HTTP 地址 vadSilenceMs?: number; // 靜音判定閾值默認(rèn) 700ms retryLimit?: number; // 鏈路失敗重試次數(shù) } export class VoiceDialogController { private state: DialogState idle; private sessionId 0; // 每次對(duì)話遞增用于過(guò)期數(shù)據(jù)丟棄 private audioCtx: AudioContext | null null; private mediaStream: MediaStream | null null; private asrSocket: WebSocket | null null; private ttsQueue: AudioBuffer[] []; // 待播音頻隊(duì)列 private retryCount 0; constructor(private opts: VoiceControllerOptions) {} async start() { // 采集音頻開(kāi)啟回聲消除與噪聲抑制這是語(yǔ)音對(duì)話能跑通的前提 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 連接失敗需重試但重試要有上限避免弱網(wǎng)下無(wú)限重連 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ù)退避重連避免服務(wù)端剛恢復(fù)就被打爆 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); // 轉(zhuǎn) 16bit PCM符合多數(shù) ASR 服務(wù)端的輸入約定 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; // 流式請(qǐng)求大模型按句切分后送 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 }); // 按標(biāo)點(diǎn)切句拿到完整分句立刻合成不等整段寫(xiě)完 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); // 過(guò)期 session 的音頻直接丟棄這是打斷不串音的關(guān)鍵 if (session ! this.session) return; this.ttsQueue.push(audioBuf); if (this.state ! speaking) this.playQueue(session); } catch (err) { // 單句合成失敗不致命跳過(guò)繼續(xù)避免整段對(duì)話卡死 console.warn([tts], err); } } private playQueue(session: number) { if (session ! this.session) return; const buf this.ttsQueue.shift(); if (!buf) { // 隊(duì)列空且仍在 speaking說(shuō)明還有未到的 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() { // 簡(jiǎn)化 VAD監(jiān)測(cè) RMS 能量超閾值認(rèn)為有人說(shuō)話 // 生產(chǎn)實(shí)現(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) { // 檢測(cè)到語(yǔ)音若正在 speaking觸發(fā)打斷 if (this.state speaking) this.interrupt(); clearTimeout(silenceTimer); } else if (this.state listening) { // 靜音超時(shí)判定句子結(jié)束 clearTimeout(silenceTimer); silenceTimer window.setTimeout(() { if (this.state listening) this.transitionTo(thinking); }, this.opts.vadSilenceMs ?? 700); } requestAnimationFrame(tick); }; tick(); } private interrupt() { // 打斷核心遞增 session 讓所有在途 TTS 作廢清空播放隊(duì)列 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; }關(guān)鍵點(diǎn)有四處。其一sessionId 遞增機(jī)制是打斷不串音的根本保障過(guò)期 session 的 TTS 塊到達(dá)即丟棄。其二ASR WebSocket 斷線做指數(shù)退避重連弱網(wǎng)下不會(huì)無(wú)限打爆服務(wù)端。其三大模型輸出按標(biāo)點(diǎn)切句后立刻送 TTS不必等整段完成首字延遲顯著降低。其四VAD 與 TTS 播放共享同一能量檢測(cè)檢測(cè)到真實(shí)語(yǔ)音立刻 interrupt。四、實(shí)時(shí)性與準(zhǔn)確性的權(quán)衡回聲、打斷與適用邊界語(yǔ)音對(duì)話前端不是全場(chǎng)景通吃?；芈曄亲畲蟮墓こ炭印g覽器原生的 echoCancellation 在耳機(jī)場(chǎng)景下效果良好一旦外放就會(huì)泄漏。某車載項(xiàng)目外放時(shí) TTS 每播一句就被自己的聲音打斷最后不得不再加一層基于參考信號(hào)的軟件 AEC工期多花了兩周。若產(chǎn)品形態(tài)不強(qiáng)制外放優(yōu)先引導(dǎo)用戶戴耳機(jī)能省掉一半麻煩。VAD 的靜音閾值是體驗(yàn)的調(diào)節(jié)閥。設(shè)短了用戶思考時(shí)的停頓會(huì)被誤判為句子結(jié)束AI 搶答設(shè)長(zhǎng)了響應(yīng)延遲變大用戶覺(jué)得慢半拍。不同場(chǎng)景的最佳值差異巨大指令式對(duì)話 400 毫秒即可長(zhǎng)陳述場(chǎng)景要 1000 毫秒以上。這個(gè)參數(shù)必須做成可配置不能寫(xiě)死。流式 TTS 的分句策略也有代價(jià)。按標(biāo)點(diǎn)切句雖然快但遇到長(zhǎng)定語(yǔ)無(wú)標(biāo)點(diǎn)句子會(huì)等到大模型輸出很久才出第一句音頻首字延遲反而劣化。部分實(shí)現(xiàn)改為按 token 數(shù)量切塊但又會(huì)把語(yǔ)義切半TTS 合成的語(yǔ)調(diào)在斷點(diǎn)處不自然。需在延遲與自然度間取舍。適用邊界指令式助手、車載語(yǔ)音、智能硬件對(duì)話場(chǎng)景收益最高這些場(chǎng)景對(duì)實(shí)時(shí)性與打斷容忍度要求嚴(yán)苛。純朗讀類如新聞播報(bào)、低頻問(wèn)答類產(chǎn)品用流式 TTS 收益有限反而增加復(fù)雜度。移動(dòng)端 Safari 對(duì) AudioContext 與 WebSocket 的限制較多需做兼容性兜底。結(jié)論語(yǔ)音對(duì)話前端的本質(zhì)是跨四段管道的狀態(tài)機(jī)調(diào)度核心是「邊說(shuō)邊聽(tīng)」與「打斷即?！埂Ｂ涞亟ㄗh第一用 VAD 驅(qū)動(dòng)狀態(tài)機(jī)靜音閾值按場(chǎng)景可配置。第二ASR 走 WebSocket 流式斷線指數(shù)退避重連。第三大模型輸出按句切分送 TTS降低首字延遲。第四sessionId 遞增機(jī)制保證打斷時(shí)過(guò)期 TTS 塊被丟棄不串音。第五回聲消除優(yōu)先靠原生能力外放場(chǎng)景補(bǔ)軟件 AEC。最終在實(shí)時(shí)性、準(zhǔn)確性與復(fù)雜度之間取得平衡。這條路在指令式語(yǔ)音助手場(chǎng)景下能跑通回報(bào)是值得的。