html5 speechsynthesis是语音播放调度器，依赖系统或浏览器tts引擎；需检测接口存在、监听voiceschanged获取音色，按lang/name匹配中文语音，设置rate/pitch/volume参数，通过speak/pause/resume/cancel控制播放并监听事件，注意safari需用户手势触发、长文本分段处理及标点保留。
HTML5 的 SpeechSynthesis 接口本身不负责语音合成，它只是浏览器提供的**语音播放调度器**——真正发声依赖系统或浏览器内置的语音引擎（TTS 引擎），开发者通过它控制“说什么、用谁说、怎么说”。
确认浏览器支持与基础初始化
并非所有浏览器都完整支持该 API，尤其 Safari 和部分安卓 WebView 限制较多。使用前务必检测：
- speechSynthesis in window 判断是否存在接口
- 调用 speechSynthesis.getVoices() 获取可用音色列表（注意：首次调用可能为空，需监听 voiceschanged 事件后再获取）
- 建议封装一个 initSpeech() 函数，在页面加载后等待 voiceschanged 触发再执行后续逻辑
选择合适语音并配置发音参数
不同系统返回的 voice 列表差异大（中文常用有 "Microsoft Yaoyao"、"Google 中文"、"Samsung TTS" 等）。关键操作包括：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 遍历 speechSynthesis.getVoices() 结果，按 lang（如 "zh-CN"）和 name 精准匹配目标语音
- 设置 utterance.rate（语速，默认 1.0，范围 0.1–10）、pitch（音调）、volume（音量，0–1）
- 中文推荐语速设为 0.9–1.1，避免过快导致吞字；英文可略调高至 1.2
播放、暂停与状态监听
语音播放不是简单调用就完事，需处理用户交互与生命周期：
- 用 speechSynthesis.speak(utterance) 启动，同一时刻只能播放一个 utterance
- 暂停用 speechSynthesis.pause()，恢复用 speechSynthesis.resume()，停止用 speechSynthesis.cancel()
- 监听 onstart、onend、onerror、onpause 等事件，用于更新 UI 状态（如按钮文字、进度提示）
- 注意：cancel() 会清空整个待播队列，若需只停当前，先 pause() 再 cancel()
实用技巧与常见坑点
真实项目中容易忽略但影响体验的细节：
- 移动端 Safari 不支持自动播放，必须由用户手势（如点击）触发首次 speak，否则静音
- 长文本建议按句号/问号/感叹号分段，每段新建 utterance 并链式调用，避免单次过长卡顿或中断丢失
- 中文标点需保留，否则 TTS 可能误读（如把“100%”读成“百分之一百”而非“百分之百”）
- 调试时可在控制台直接运行 speechSynthesis.getVoices().filter(v => v.lang.includes('zh')) 快速查看本地中文音色
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
