SpeechSynthesis语音合成需用户手势触发、显式指定中文voice、手动管理播放状态。必须在click等交互回调中调用speak()，等待onvoiceschanged后筛选zh-CN语音，通过cancel()/pause()/resume()控制流程，并做好降级处理。
HTML 里用 SpeechSynthesis 做语音合成，不是加个标签就能响——它依赖浏览器原生 API，不支持自动播放、不能跨域加载语音资源、且多数浏览器默认静音策略下必须由用户手势（如点击）触发，否则直接静默失败。
SpeechSynthesis 必须手动触发，且仅响应用户手势
几乎所有现代浏览器（Chrome/Firefox/Edge）都要求 speechSynthesis.speak() 调用发生在用户真实交互回调内，比如 onclick、oninput 或 addEventListener('click', ...)。在页面加载时直接调用、或在定时器（setTimeout）、fetch 回调里调用，都会被忽略，且不报错——只是一声不吭。
- ✅ 正确：按钮点击后立即调用
speechSynthesis.speak(utterance) - ❌ 错误：在
window.onload或fetch().then(...)中调用 - ⚠️ 注意：即使已调用过一次，后续若离开页面再返回，仍需重新由用户手势激活（部分浏览器会重置权限状态）
中文发音不准？先检查 voice 属性是否显式指定
SpeechSynthesis 默认 voice 不稳定：Chrome 在中文系统可能选英文 voice，Safari 可能根本没中文字体；不设 utterance.voice 就等于听天由命。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须先等
speechSynthesis.onvoiceschanged触发，再调用speechSynthesis.getVoices() - 遍历 voices 找
lang包含'zh-CN'或'zh'的 voice，优先选name含 “Chinese”、“TTS” 或系统自带名称（如 macOS 的 “Ting-Ting”） - 设置
utterance.voice = selectedVoice，别依赖默认值 - 示例片段：
speechSynthesis.onvoiceschanged = () => { const zhVoice = speechSynthesis.getVoices().find(v => v.lang.includes('zh-CN')); if (zhVoice) utterance.voice = zhVoice; };
暂停/恢复/取消语音必须用 speak() / pause() / resume() / cancel() 配合状态判断
SpeechSynthesis 没有“正在播放中”的布尔属性，得靠监听 onstart、onend、onpause 等事件 + 自己维护状态变量。直接反复调用 cancel() 或 resume() 可能无效甚至报错。
立即学习“前端免费学习笔记（深入）”；
-
speechSynthesis.pause()只对当前正在播放的 utterance 生效；若没在播，无效果 -
speechSynthesis.resume()仅恢复被pause()暂停的 utterance，不能唤醒已cancel()掉的 - 推荐做法：每次 speak 前先
speechSynthesis.cancel()清空队列，再新建 utterance 并 speak - 避免连续点击导致多段语音叠加：用
speechSynthesis.pending + speechSynthesis.speaking判断是否忙
真正难的不是让字说出来，而是让“说的过程”可控、可预期、可降级——比如 voice 加载失败时 fallback 文本提示，或 iOS Safari 根本不支持时提前检测并隐藏语音按钮。这些逻辑不在 API 文档里，但在真实项目里躲不掉。
