JavaScript可通过Web Speech API的SpeechSynthesis接口实现浏览器端语音合成，需检测support、处理音色加载延迟、设置参数并调用speak，注意移动端需用户手势触发且存在兼容性限制。
JavaScript 可以通过浏览器内置的 Web Speech API 中的 SpeechSynthesis 接口实现语音合成，无需第三方库或后端支持，兼容 Chrome、Edge、Safari（部分支持）、Firefox（需手动启用）等主流桌面浏览器。
检查浏览器是否支持语音合成
不是所有环境都默认启用该功能，尤其移动端限制较多。使用前应先检测：
```js
if ('speechSynthesis' in window) {
console.log('支持语音合成');
} else {
console.log('不支持');
}
```
基础语音合成步骤
核心流程分四步：获取实例 → 选择音色 → 创建语音内容 → 播放
立即学习“Java免费学习笔记（深入）”；
- 调用
window.speechSynthesis获取合成器实例 - 用
getVoices()获取可用音色列表（注意：首次调用可能为空，需监听voiceschanged事件） - 用
SpeechSynthesisUtterance(text)创建语音任务对象 - 设置语速（
rate）、音高（pitch）、音量（volume）等属性，再调用speechSynthesis.speak(utterance)
处理音色加载延迟问题
Chrome 等浏览器中，speechSynthesis.getVoices() 初次调用常返回空数组。正确做法是监听事件：
```js
function speak(text) {
const synth = window.speechSynthesis;
let voices = synth.getVoices();
if (voices.length === 0) {
synth.onvoiceschanged = () => {
voices = synth.getVoices();
playWithVoice(text, voices);
};
} else {
playWithVoice(text, voices);
}
}
function playWithVoice(text, voices) {
const utterance = new SpeechSynthesisUtterance(text);
// 例如选中文音色（按语言过滤）
const cnVoice = voices.find(v => v.lang.includes('zh')) || voices[0];
utterance.voice = cnVoice;
utterance.rate = 1.0;
utterance.pitch = 1.2;
window.speechSynthesis.speak(utterance);
}
```
实用控制与注意事项
- 暂停/恢复/取消：用
speechSynthesis.pause()、.resume()、.cancel() - 监听播放状态：绑定
onstart、onend、onerror等事件 - 移动端限制：iOS Safari 默认禁用自动播放，需用户手势触发（如点击按钮后调用
speak） - 隐私提示：部分浏览器会在地址栏显示麦克风图标（因 API 同属 Web Speech），但语音合成本身不采集音频
