基于 WebSocket 的流式语音合成：架构与实现要点

原创

Front_Yue

发布于 2025-08-26 21:59:59

2050

文章被收录于专栏：码艺坊码艺坊

高质量的浏览器端流式语音合成（Text-To-Speech, TTS）实现，核心在于三件事：

数据通道：通过 WebSocket 持续发送请求、接收分片音频流；
音频管线：将分片的 Base64/PCM16 解码为 AudioBuffer 并在 Web Audio 中无缝拼接播放；
队列与状态：良好的分片策略、并发控制、背压与暂停/恢复/停止的状态机设计。

本文梳理一套通用的前端流式 TTS 技术方案，不依赖具体项目，重点聚焦可迁移的工程实践与代码范式。

1. 鉴权与 WebSocket 握手

不少云厂商基于 HTTP 签名（如 HMAC-SHA256）来保护 TTS WebSocket 接入。通用做法是：

1) 组装签名原文：包含 host, date, request-line 等固定字段；

2) 使用 apiSecret 做 HMAC-SHA256，结果再做 Base64；

3) 将 authorization、date、host 作为查询参数拼到 WS URL。

示例（仅示意）：

import CryptoJS from 'crypto-js';

function buildWsUrl({ baseUrl, host, path, apiKey, apiSecret }) {
  const date = new Date().toGMTString();
  const algorithm = 'hmac-sha256';
  const headers = 'host date request-line';
  const signatureOrigin = `host: ${host}\ndate: ${date}\nGET ${path} HTTP/1.1`;
  const signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);
  const signature = CryptoJS.enc.Base64.stringify(signatureSha);
  const authOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
  const authorization = btoa(authOrigin);

  const url = `${baseUrl}?authorization=${authorization}&date=${encodeURIComponent(date)}&host=${host}`;
  return url.replace('https://', 'wss://');
}

要点：

使用 toGMTString() 或 RFC 规范的日期字符串，避免时区歧义；
URL 查询参数注意转义；
浏览器端密钥暴露有风险，生产建议通过自己的后端签名后下发临时令牌。

2. 文本预处理与编码

TTS 往往要求 UTF-8 文本并做 Base64。为提升稳定性与音质：

预清洗：去除多余空白、控制字符，统一标点；
编码：用 TextEncoder 转 UTF-8，再转 Base64；
分片：长文本分段发送，减少单次合成时延。

function encodeUtf8Base64(text) {
  const clean = text.trim().replace(/\s+/g, ' ');
  const utf8 = new TextEncoder().encode(clean);
  let binary = '';
  for (const byte of utf8) binary += String.fromCharCode(byte);
  return btoa(binary);
}

3. 文本分片策略：触发阈值与尾部冲刷

对“边打字边播报/聊天流式播报”场景，过小分片会导致频繁建连或过多请求，过大分片则首音出声慢。通用策略：

递增触发阈值：按字符长度触发 TTS，阈值从小到大（如 10 → 50 → 100），首响快、后续更稳；
尾部延迟冲刷：尾段不足阈值时，设一个短延时（如 300–500ms）自动冲刷，避免收尾不播；
去抖：新数据到来重置计时器，降低冗余请求。

伪代码：

const thresholds = [10, 50, 100];
let idx = 0, trigger = thresholds[0];
let buffer = '';
let flushTimer = null;

function onTextChunk(chunk) {
  buffer += chunk;
  if (buffer.length >= trigger) {
    enqueueTts(buffer);
    buffer = '';
    idx = Math.min(idx + 1, thresholds.length - 1);
    trigger = thresholds[idx];
  } else {
    scheduleFlush();
  }
}

function scheduleFlush(delay = 400) {
  if (flushTimer) clearTimeout(flushTimer);
  flushTimer = setTimeout(() => {
    if (buffer) { enqueueTts(buffer); buffer = ''; }
  }, delay);
}

4. 并发与背压：连接池与队列

如果服务端支持多并发通道，前端可以控制并发数（如 2）来兼顾吞吐与延迟：

连接池：简易信号量 acquire/release 控制最大并发；
TTS 队列：文本分片先进先出进入合成队列；
音频队列：TTS 返回的分片音频进入音频队列，等待解码与拼接播放；
背压：当音频队列积压过多时，适当提高触发阈值或丢弃极短无意义分片。

示意：

const MAX_CONCURRENCY = 2;
const active = new Set();
const waiters = [];

function acquire() {
  return new Promise(resolve => {
    if (active.size < MAX_CONCURRENCY) {
      const id = Symbol(); active.add(id); resolve(id);
    } else {
      waiters.push(resolve);
    }
  });
}

function release(id) {
  active.delete(id);
  if (waiters.length) {
    const next = waiters.shift();
    const nid = Symbol(); active.add(nid); next(nid);
  }
}

5. WebSocket 消息循环与重试

健壮性要点：

连接超时（如 15s）自动关闭并重试（指数退避：1s/2s/4s）；
消息 code != 0 视为失败，尽早释放并上报；
status === 2 表示服务端完成当前合成，收尾并 resolve。

指数退避重试示意：

async function withRetries(task, { retries = 3 } = {}) {
  let attempt = 0;
  while (true) {
    try { return await task(); }
    catch (e) {
      if (attempt++ >= retries) throw e;
      const delay = 2 ** (attempt - 1) * 1000;
      await new Promise(r => setTimeout(r, delay));
    }
  }
}

6. 音频解码：PCM16 → Float32 与无缝拼接

云端常返回 Base64 编码的 PCM16 单声道数据（16kHz）。在 Web Audio 中需转成 Float32 并写入 AudioBuffer：

async function decodePcm16ToBuffer(base64Audio, audioCtx, sampleRate = 16000) {
  const bin = atob(base64Audio);
  const bytes = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
  const pcm = new Int16Array(bytes.buffer);
  const floats = new Float32Array(pcm.length);
  for (let i = 0; i < pcm.length; i++) floats[i] = pcm[i] / 32768;
  const buffer = audioCtx.createBuffer(1, floats.length, sampleRate);
  buffer.getChannelData(0).set(floats);
  return buffer;
}

拼接播放的关键是按时间线连续排布各段：

function scheduleBuffers(buffers, audioCtx) {
  let t = audioCtx.currentTime;
  const sources = [];
  for (const buf of buffers) {
    const src = audioCtx.createBufferSource();
    src.buffer = buf;
    src.connect(audioCtx.destination);
    src.start(t);
    t += buf.duration;
    sources.push(src);
  }
  return sources;
}

提示：AudioBufferSourceNode 一次性使用，启动后无法再次 start()；若要实现“暂停后从中间继续”，需要记录偏移并用新的 Source 重新从偏移处调度。

7. 播放状态机：播放/暂停/恢复/停止

良好的用户体验需要稳定的控制：

play：创建或恢复 AudioContext，拉起队列处理；
pause：停止当前 Source，记录每段的已播时长（或统一为“从头重新拼接但带偏移”策略）；
resume：用新的 Source 从偏移位置继续；
stop：停止全部，清空队列与缓冲，并重置阈值与计时器。

简化状态示意：

stopped → playing → paused → (resume) → playing → (stop) → stopped
                     ↘──────────── (stop) ───────────↗

实践建议：

统一通过队列调度，避免并发修改同一批 Source；
停止时立即冲刷残留文本，防止“卡尾”；
处理 AudioContext.state === 'suspended' 的自动恢复（用户手势触发后才允许发声）。

8. 队列处理循环与背压

可以用两条独立但协作的管线：

TTS 管线：ttsQueue → synthesize → audioQueue；
音频管线：audioQueue → decode → schedule → play。

循环条件：

当 ttsQueue 非空且没有正在合成的文本时，取一段去合成；
当 audioQueue 非空且未在播放时，取下一块去解码播放；
每轮结束后 setTimeout 轻量轮询（避免同步递归导致阻塞）。

9. 可配置项与语音参数

常见可调参数：

发音人：vcn；
语速/音量/音调：speed/volume/pitch；
音频格式：aue（如 raw vs mp3）和 auf（采样率与位宽）。

工程上建议将这些参数抽象为“业务配置 + 运行时覆盖”，便于快速切换音色与风格。

10. 错误处理与观测性

为缩短 MTTR（平均恢复时间），需要在关键链路打点与日志：

鉴权失败、WebSocket 建连超时、消息异常码；
解码失败、无有效音频、播放中断；
队列长度、丢帧/丢段、延迟与首响时间；
用户行为：暂停/恢复/停止次数与触发原因。

11. 兼容性与安全

iOS/Safari 对自动播放要求更严格，需用户手势激活 AudioContext；
浏览器端存放长期密钥不安全，生产建议由服务端代理签名或下发短期令牌；
对于企业场景，WebSocket 需配合 WSS 与严格的 CORS/Origin 校验。

12. 端到端最小示例（伪代码）

// 1) 初始化
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const ttsQueue = [], audioQueue = [];
let playing = false, paused = false;

// 2) 推入文本（支持流式）
function pushText(chunk) { /* 参照第 3 节的分片与冲刷策略 */ }

// 3) 合成
async function synthesize(text) {
  const url = /* buildWsUrl(...) */;
  const ws = new WebSocket(url);
  return new Promise((resolve, reject) => {
    const audioChunks = [];
    ws.onopen = () => ws.send(JSON.stringify({ /* 参数 + encodeUtf8Base64(text) */ }));
    ws.onmessage = e => {
      const msg = JSON.parse(e.data);
      if (msg.code !== 0) return reject(new Error('synthesis failed'));
      if (msg.data?.audio) audioChunks.push(msg.data.audio);
      if (msg.data?.status === 2) resolve(audioChunks);
    };
    ws.onerror = reject;
  });
}

// 4) 播放
async function playNext() {
  if (playing || paused) return;
  if (!audioQueue.length) return;
  playing = true;
  const base64Chunks = audioQueue.shift();
  const buffers = [];
  for (const c of base64Chunks) buffers.push(await decodePcm16ToBuffer(c, audioCtx));
  const sources = scheduleBuffers(buffers, audioCtx);
  sources.at(-1).onended = () => { playing = false; playNext(); };
}

// 5) 控制
function pause() { /* 停止当前源并记录偏移，下次 resume 以新源继续 */ }
function resume() { /* 从记录的偏移处重建 source 并继续 */ }
function stop() { /* 清理状态、队列与计时器 */ }