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('不支持');
}
```

基础语音合成步骤

核心流程分四步：获取实例 → 选择音色 → 创建语音内容 → 播放

• 调用 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），但语音合成本身不采集音频