speechSynthesis.speak() 正常调用需同时满足用户点击触发、HTTPS 环境、显式设置 utterance.lang（如 'zh-CN'）；首次调用必须在 click/touchend 中，voiceschanged 后动态匹配中文语音，每次 speak 前需 cancel 避免堆叠。
能用，但必须满足三个硬条件：用户点击触发、HTTPS 环境、显式指定 lang（如 'zh-CN'），缺一不可，否则静音或报 DOMException: The user gesture requirement is not met。
为什么 speechSynthesis.speak() 一调就静音或报错
最常见原因是没走用户真实交互路径。浏览器强制要求首次调用 speechSynthesis.speak() 必须发生在 click 或 touchend 事件回调里——window.onload、setTimeout、fetch 回调、甚至 DOMContentLoaded 都不算数。
- 即使页面已加载完成，也要等用户点一次按钮才“解锁”语音权限
- 后续调用可脱离用户手势（比如自动播放下一句），但首次必须手动点
- HTTP 协议下直接禁用该 API，本地
file://协议也不行，必须 HTTPS 或localhost -
utterance.lang不设或设错（如写成'zh'或'cn'）会导致某些浏览器（尤其是 Safari）静音
如何正确获取并使用中文语音
speechSynthesis.getVoices() 返回的列表初始为空，需监听 voiceschanged 事件再取值；且不同浏览器返回的中文语音名不一致（Chrome 多为 zh-CN，Safari 可能是 zh-CN-Standard-A），不能硬编码索引。
- 必须在
speechSynthesis.addEventListener('voiceschanged', ...)回调里调用getVoices() - 推荐用
voices.find(v => v.lang.includes('zh'))而非voices[0]，避免选到英文语音 - 选中后显式赋给
utterance.voice，比只设lang更可靠（尤其在多语音系统上） - 示例：
speechSynthesis.addEventListener('voiceschanged', () => { const voices = speechSynthesis.getVoices(); const zhVoice = voices.find(v => v.lang.includes('zh')); if (zhVoice) { utterance.voice = zhVoice; } });
如何避免语音堆叠和状态失控
连续多次调用 speechSynthesis.speak(utterance) 会把任务塞进队列，导致语音重叠、跳读或无法中断。每次播放前应主动清理。
立即学习“前端免费学习笔记（深入）”；
- 开始新播报前必先执行
speechSynthesis.cancel()，清空所有待播/正在播的内容 - 暂停/恢复用
speechSynthesis.pause()和speechSynthesis.resume()，但注意它们影响整个队列，不是单个utterance - 监听
utterance.onend而非speechSynthesis.onend，后者不精确（它只在队列全空时触发） - 若需链式播报（A 播完播 B），应在 A 的
onend里 new B 并speak()，不要提前全部塞进队列
最容易被忽略的是：语音引擎加载有延迟，voiceschanged 事件可能在页面渲染后几毫秒才触发，而用户点击可能发生在之前——所以绑定事件监听要尽早（比如在 <script> 标签顶部），别等 DOM 就绪后再加。另外，移动端 iOS Safari 对自动播放更敏感，哪怕满足所有条件，首次仍可能失败，建议加一次重试逻辑。
