当前位置：首页 > JavaScript

js实现语音播报

2026-01-30 22:20:13JavaScript

使用Web Speech API实现语音播报

Web Speech API是浏览器原生支持的语音合成接口，无需额外依赖库。以下为基本实现方法：

// 创建语音合成对象
const utterance = new SpeechSynthesisUtterance('需要播报的文本内容');

// 设置语音参数（可选）
utterance.voice = speechSynthesis.getVoices()[0]; // 选择发音人
utterance.rate = 1.0; // 语速 (0.1-10)
utterance.pitch = 1.0; // 音高 (0-2)
utterance.volume = 1.0; // 音量 (0-1)

// 触发语音播报
speechSynthesis.speak(utterance);

获取可用语音列表

不同浏览器/操作系统支持的语音类型不同，可通过以下方式获取：

js实现语音播报

speechSynthesis.getVoices().forEach(voice => {
  console.log(voice.name, voice.lang);
});

注意：部分浏览器需要等待voiceschanged事件触发后才能获取列表：

js实现语音播报

speechSynthesis.onvoiceschanged = () => {
  const voices = speechSynthesis.getVoices();
};

语音播报控制方法

// 暂停当前播报
speechSynthesis.pause();

// 恢复暂停的播报
speechSynthesis.resume();

// 取消所有待播报内容
speechSynthesis.cancel();

// 检查是否正在播报
speechSynthesis.speaking; // 返回布尔值

事件监听示例

utterance.onstart = (event) => {
  console.log('播报开始');
};

utterance.onend = (event) => {
  console.log('播报结束');
};

utterance.onerror = (event) => {
  console.error('播报出错', event.error);
};

兼容性注意事项

该API在Chrome、Edge、Firefox、Safari等现代浏览器中支持良好
部分移动端浏览器可能有特殊限制
企业微信等内置浏览器可能需要特殊配置
建议添加特性检测：

if ('speechSynthesis' in window) {
  // 支持语音合成
} else {
  console.warn('当前浏览器不支持Web Speech API');
}

高级用法示例

队列播报多个文本：

const texts = ['第一段', '第二段', '第三段'];
texts.forEach(text => {
  const msg = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(msg);
});

动态修改语音参数：

function speakWithSettings(text, options = {}) {
  const utterance = new SpeechSynthesisUtterance(text);
  Object.assign(utterance, options);
  speechSynthesis.speak(utterance);
}

// 使用示例
speakWithSettings('重要通知', {
  voice: speechSynthesis.getVoices().find(v => v.lang === 'zh-CN'),
  rate: 0.8,
  volume: 0.7
});