speechsynthesis 实现点击朗读需先监听 onvoiceschanged 或轮询 getvoices() 确保音色就绪，每次新建 utterance 并调用 cancel() 避免堆积，且必须由用户手势同步触发 speak()；移动端兼容性差，fallback 应优先考虑视觉模拟而非音频。
怎么用 SpeechSynthesis 实现点击朗读
浏览器原生支持文字转语音，不用第三方库，核心就是 window.speechSynthesis。它不是 Promise 异步 API，调用后立刻生效，但需要手动检查是否就绪、是否被用户阻止。
- 必须等
speechSynthesis.onvoiceschanged触发或轮询speechSynthesis.getVoices()非空后才能选音色，否则voice为undefined - 朗读前先
speechSynthesis.cancel()，避免多次点击堆积任务 -
SpeechSynthesisUtterance实例不能复用，每次都要新建 - 移动端 Safari 对自动播放限制更严，必须由用户手势（如
click）触发，且不能在异步回调里调用speechSynthesis.speak()
const btn = document.querySelector('#read-btn');
btn.addEventListener('click', () => {
const utterance = new SpeechSynthesisUtterance('你好，这是一段测试文字');
utterance.voice = speechSynthesis.getVoices().find(v => v.lang === 'zh-CN') || null;
utterance.rate = 0.9;
speechSynthesis.cancel();
speechSynthesis.speak(utterance);
});
为什么点击没反应？常见静默失败原因
绝大多数“点了没声音”不是代码写错，而是被浏览器策略拦截或状态未就绪。
-
speechSynthesis.getVoices()初始返回空数组，需监听onvoiceschanged或延时重试（iOS Safari 尤其明显） - 页面未获得焦点时，Chrome 可能暂停语音；隐身模式下部分语音引擎不可用
- 如果用户在设置中禁用了“网站使用语音合成功能”，
speechSynthesis.speak()会静默失败，无报错 - 传入空字符串、全是空白符、或含大量不可读符号（如乱码、特殊 emoji）时，
speak()不报错但也不发声
SpeechSynthesis 和 Web Audio API 能混用吗
不能直接混用。SpeechSynthesis 是独立输出通道，不产生 AudioContext 或可处理的音频流。它没有音轨控制权，也不能加混响、变声、精确暂停到毫秒级。
- 想做音效叠加（比如朗读+背景音乐），只能靠两个独立输出：一个走
speechSynthesis，一个走AudioContext，手动协调时间 - 暂停/继续只能靠
speechSynthesis.pause()/resume()，但它们是全局的，会影响所有正在朗读的Utterance - 要获取当前朗读进度，得监听
utterance.onboundary事件，而不是靠currentTime这类属性
移动端兼容性与 fallback 方案怎么设
iOS Safari 支持 SpeechSynthesis，但默认只带英文音色，中文需系统语言设为简体中文且重启浏览器才可能加载；Android Chrome 基本可用，但低端机型合成延迟高。
- 不要依赖
navigator.userAgent判断，直接检测'speechSynthesis' in window和speechSynthesis.getVoices().length > 0 - fallback 不建议用录音文件（维护成本高、多语言难覆盖），可降级为高亮文字+逐句放大动画，模拟“正在读”效果
- 若必须音频 fallback，优先用
<audio></audio>播放预生成 MP3，但注意 iOS Safari 不支持自动播放，仍需用户点击触发
真正麻烦的是音色一致性——不同系统、不同浏览器返回的 voice.name 完全不同，没法硬编码匹配，只能按 lang + name 关键词模糊筛选，比如找含 'Chinese'、'Zh' 或 '普通话' 的项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
