WebSocket仅提供实时通信通道，TTS由服务端完成并推送音频流，前端通过AudioContext或播放，需处理触发事件、流式传输、播放控制及断连重试等细节。
在HTML5中，WebSocket本身不直接处理语音合成，它只负责建立浏览器与服务器之间的全双工实时通信通道。真正的语音合成（TTS）需由服务端完成（如调用阿里云、腾讯云、Edge TTS、或本地部署的VITS/Coqui TTS），再将音频流（如PCM、MP3、Opus）通过WebSocket推送给前端；前端则用 AudioContext 或 <audio></audio> 播放。关键在于“事件触发”——即前端监听特定行为（如按钮点击、表单提交、WebSocket消息到达），再发起TTS请求并播放结果。
1. 前端：建立WebSocket连接并监听触发事件
使用 WebSocket 连接后端TTS服务（例如 wss://your-api.com/tts），并在需要时发送含文本和参数的JSON消息。常见触发方式包括：
- 用户点击按钮：
document.getElementById('speak-btn').onclick = () => ws.send(JSON.stringify({text: '你好，欢迎回来', voice: 'zh-CN-XiaoxiaoNeural'})); - 监听WebSocket收到服务端响应（如音频元数据或Base64音频片段）：
ws.onmessage = (e) => { const data = JSON.parse(e.data); if (data.type === 'audio-ready') playAudioFromUrl(data.url); }; - 结合自定义事件（如监听表单提交后触发合成）：
form.addEventListener('submit', e => { e.preventDefault(); ws.send(...); });
2. 服务端：接收请求 → 调用TTS引擎 → 流式推送音频
服务端（Node.js / Python / Java等）需完成三步闭环：
- 接收WebSocket消息，解析待合成文本、语言、音色等参数
- 调用TTS API（推荐使用支持流式响应的接口，如Azure Cognitive Services的
/speech/synthesize-to-audio，或本地FastAPI+VITS返回chunked audio） - 将生成的音频（建议MP3或Opus，体积小、兼容好）以二进制（
ArrayBuffer）或Base64形式通过WebSocket发回前端；若音频较大，可分片发送并附带seq序号，前端拼接后播放
3. 前端播放：避免阻塞，支持中断与复用
不建议直接用 <audio src="data:audio/mp3;base64,..."></audio> 播放长音频（Base64开销大、无法流式加载）。推荐方案：
立即学习“前端免费学习笔记（深入）”；
-
临时Blob URL播放：收到完整音频数据后，
const blob = new Blob([arrayBuffer], {type: 'audio/mp3'}); const url = URL.createObjectURL(blob); audio.src = url; audio.play(); -
Web Audio API流式解码（高级）：适用于需低延迟或动态音效处理的场景，用
AudioContext.decodeAudioData()解码PCM/Opus（需额外解码库如opus-recorder或ffmpeg.wasm） -
播放控制逻辑：每次新请求前调用
audio.pause(); URL.revokeObjectURL(audio.src);防止内存泄漏和多音叠加
4. 注意事项与优化点
实际落地需关注体验细节：
- WebSocket断连需自动重连（指数退避策略），并缓存最近一次TTS请求，恢复后重发
- TTS响应慢时，前端显示“正在合成…”状态，避免用户重复点击
- 移动端需在用户手势（如click/touchend）后首次调用
audio.play()才能解锁音频播放权限（iOS Safari尤其严格） - 如需高并发，服务端应复用TTS连接池、启用音频缓存（相同文本→相同MD5→返回缓存URL）
