JavaScript如何实现语音合成_JavaScript中语音API怎样调用_网络技术

JavaScript语音合成依赖Web Speech API的SpeechSynthesis接口，支持纯前端文本转语音；需检测window.speechSynthesis可用性，监听voiceschanged获取音色，创建SpeechSynthesisUtterance配置参数后调用speak()播放，并可控制暂停、恢复、取消及监听事件。

JavaScript 实现语音合成主要依靠 Web Speech API 中的 SpeechSynthesis 接口，它无需后端、纯前端即可将文本转为语音，兼容 Chrome、Edge、Safari（部分支持）、Firefox（需手动启用）等现代浏览器。

检查并获取语音合成实例

不是所有浏览器都默认启用或完全支持该 API，调用前应先检测可用性：

用 window.speechSynthesis 判断是否存在
通过 speechSynthesis.getVoices() 获取系统可用音色列表（注意：首次调用可能为空，需监听 voiceschanged 事件）

示例：

if ('speechSynthesis' in window) {
  const synth = window.speechSynthesis;
  synth.onvoiceschanged = () => {
    const voices = synth.getVoices();
    console.log('可用语音：', voices);
  };
} else {
  console.warn('当前浏览器不支持语音合成');
}

设置语音参数并播放文本

创建 SpeechSynthesisUtterance 实例，配置文字、语速、音高、音量和指定语音（voice），再交给 speechSynthesis.speak() 播放：

text：要朗读的字符串（建议过滤 HTML 标签和特殊符号）
rate：语速（0.1–10，默认 1）
pitch：音高（0–2，默认 1）
volume：音量（0–1，默认 1）
voice：从 getVoices() 中选取，例如 voices.find(v => v.lang === 'zh-CN')

示例（中文朗读）：

const utterance = new SpeechSynthesisUtterance('你好，欢迎使用语音合成');
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.1;

// 选择中文语音（确保已加载完成）
synth.onvoiceschanged = () => {
  const voices = synth.getVoices();
  const cnVoice = voices.find(v => v.lang.includes('zh'));
  if (cnVoice) utterance.voice = cnVoice;
};

synth.speak(utterance);

控制播放与监听状态

语音合成支持暂停、恢复、取消和事件监听，适合做交互式语音功能：

synth.pause() 和 synth.resume() 控制播放暂停/继续
synth.cancel() 终止所有排队中的语音
常用事件：onstart、onend、onerror、onpause、onresume

例如监听结束并自动播放下一句：

utterance.onend = () => {
  console.log('朗读完成');
  // 可触发下一步逻辑，如高亮对应段落、加载新内容等
};

注意事项与兼容性提醒

实际开发中容易踩坑的地方：

Safari 对中文语音支持较弱，部分系统无内置中文 voice，可降级提示或 fallback 到英文
移动端 iOS Safari 仅在用户手势触发（如点击按钮）后才允许首次调用 speak()
多次连续调用 speak() 会自动入队，但未处理好 cancel() 可能导致旧语音意外播放
隐私模式下某些浏览器会禁用该 API，建议加 try-catch 和友好提示

不复杂但容易忽略细节，合理封装成工具函数可大幅提升复用性和健壮性。

# javascript # java # html # 前端 # 浏览器 # edge # 工具 # safari # 后端 # ios # win # speak

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】