HTML仪表盘语音播报应使用SpeechSynthesis API而非Web Speech识别或第三方SDK；需用户手势激活、防重叠播报、按语言筛选音源、适配语速语气，并兼顾无障碍。
HTML 仪表盘做语音播报，核心就一条：用 SpeechSynthesis API，别碰 Web Speech API 的识别部分（SpeechRecognition），那玩意儿兼容性差、权限卡得死，纯增加失败率。
为什么不用第三方语音 SDK？
多数语音 SDK（比如讯飞、百度语音）要鉴权、走网络、有调用配额，而仪表盘常需离线或低延迟响应——比如油温超限立刻播报，等服务器返回再播就晚了。原生 SpeechSynthesis 无网络依赖，浏览器自带，Chrome/Firefox/Edge 均支持（Safari 仅 macOS 14+ 支持，iOS Safari 不支持）。
常见错误现象：speechSynthesis.getVoices() 返回空数组 → 页面没加载完就调用，或用户从未触发过用户手势（如点击），导致语音引擎未激活。
- 必须在用户交互（如
click、keydown）后首次调用speechSynthesis.speak()，否则 Chrome 会静默拒绝 - 后续自动播报（如定时检查温度）可复用已激活的引擎，无需再等手势
- 避免在
DOMContentLoaded里直接speak()，大概率失效
如何让语音提醒不打断、不堆积？
仪表盘常需轮询状态（如每 5 秒查一次电压），但若每次异常都 speak()，声音会重叠、队列爆满、浏览器卡顿。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
speechSynthesis.cancel()清空待播队列，再播新内容 - 加防抖：同一类告警（如“电池低压”）10 秒内只播一次，用
setTimeout+ 标志位控制 - 关键告警（如“刹车失灵”）设
voice.rate = 0.9、pitch = 2提高辨识度，非关键提示用volume = 0.3降低干扰
怎么选语音、换语速、带语气？
SpeechSynthesis 的声音靠 SpeechSynthesisVoice 实例控制，不是靠字符串名匹配——不同系统返回的 voice.name 差异极大（Windows 是 “Microsoft David Desktop”，macOS 是 “Alex” 或 “Sin-ji”）。
正确做法：
- 先等
speechSynthesis.onvoiceschanged触发，再取speechSynthesis.getVoices() - 按
lang筛选（如voice.lang.includes('zh-CN')），比硬写名字靠谱 - 语速别超
rate: 1.2，否则中文吞音；低于0.7显拖沓，仪表场景推荐0.85–1.0 - 想模拟“警告语气”，不要只调
pitch，配合volume: 0.9+ 短句（≤8 字）更有效
真正容易被忽略的是：语音播报会抢屏幕阅读器焦点，视障用户正在听页面描述时，突然插进一句“水温过高”，体验直接断裂。如果仪表盘需无障碍合规，必须用 aria-live="polite" 区域同步文本提示，并在 speak() 前暂停阅读器（部分浏览器支持 speechSynthesis.pause()，但不可靠）。务实做法是——把语音当作辅助通道，关键状态永远同步显示在 DOM 里，别让它成为唯一出口。
