JS语音合成实现全解析

想要实现网页语音提示和辅助功能吗？本文详解如何使用 JavaScript 通过 Web Speech API 实现语音合成，即文本转语音（TTS）功能。首先，检测浏览器是否支持 `speechSynthesis` 接口，然后创建 `SpeechSynthesisUtterance` 实例，设置文本、音量、语速、音调和语言等参数，并通过 `speak()` 方法播放语音。我们还将介绍如何通过 `getVoices()` 获取可用的语音列表，选择特定语言或声音，以及如何使用 `pause()`、`resume()` 和 `cancel()` 控制播放状态。需要注意的是，在使用过程中应关注兼容性问题，并遵循用户交互触发机制，以确保最佳的用户体验。快来学习如何让你的网页“开口说话”吧！

JavaScript可通过Web Speech API实现文本转语音，首先检测浏览器是否支持speechSynthesis接口，然后创建SpeechSynthesisUtterance实例设置文本、音量、语速、音调和语言等参数，调用speak()方法播放语音；通过getVoices()获取可用语音列表并选择特定语言或声音，还可使用pause()、resume()和cancel()控制播放状态，适用于网页语音提示与辅助功能，需注意兼容性及用户交互触发限制。

JavaScript 可以通过 Web Speech API 实现语音合成功能，这项技术被称为“文本转语音”（Text-to-Speech）。现代浏览器提供了 window.speechSynthesis 接口，允许开发者将文字内容朗读出来。使用起来简单直接，适合在网页中添加语音提示、辅助阅读等功能。

1. 检测浏览器是否支持语音合成

在调用语音合成功能前，先确认当前浏览器是否支持 Web Speech API 的 speechSynthesis 模块。

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

2. 基本语音合成使用方法

使用 speechSynthesis.speak() 方法可以播放语音。需要创建一个 SpeechSynthesisUtterance 实例来定义要朗读的内容和相关参数。

const utterance = new SpeechSynthesisUtterance('你好，这是一段测试语音');
speechSynthesis.speak(utterance);

上面代码会朗读指定的中文文本。你可以更改文本内容实现不同语句的播报。

3. 设置语音参数（语速、音调、音量、语言）

SpeechSynthesisUtterance 支持多种属性设置，让语音更符合需求。

• text：要朗读的文本
• volume：音量，范围 0 到 1
• rate：语速，0.1 到 10，正常值为 1
• pitch：音调，0 到 2，正常值为 1
• lang：语言，如 'zh-CN'（中文）、'en-US'（英文）

const utterance = new SpeechSynthesisUtterance();
utterance.text = '欢迎使用语音合成功能';
utterance.volume = 1;     // 最大音量
utterance.rate = 1;       // 正常语速
utterance.pitch = 1;      // 正常音调
utterance.lang = 'zh-CN'; // 使用中文

speechSynthesis.speak(utterance);

4. 获取可用的语音列表

不同设备和浏览器提供的语音选项不同。可以通过 speechSynthesis.getVoices() 获取系统支持的语音列表，然后选择特定语音。

// 获取语音列表（异步加载）
function populateVoices() {
  const voices = speechSynthesis.getVoices();
  voices.forEach(voice => {
    console.log(voice.name, voice.lang);
  });
}

// 第一次调用时可能为空，需监听 voiceschanged 事件
speechSynthesis.addEventListener('voiceschanged', populateVoices);

// 调用一次立即尝试获取
populateVoices();

获取到语音后，可指定某一种语音：

utterance.voice = voices.find(v => v.lang === 'zh-CN');

5. 控制语音播放（暂停、恢复、取消）

可以对正在或即将播放的语音进行控制：

• speechSynthesis.pause(); —— 暂停播放
• speechSynthesis.resume(); —— 恢复播放
• speechSynthesis.cancel(); —— 取消当前及队列中的所有语音

例如，在用户点击按钮时取消语音：

document.getElementById('stop-btn').addEventListener('click', () => {
  speechSynthesis.cancel();
});

基本上就这些。Web Speech API 的语音合成功能在大多数现代浏览器中运行良好，但注意部分功能在移动端或低版本浏览器中可能受限。建议加入兼容性判断和用户交互触发机制（比如必须由用户点击才能发声），避免被浏览器阻止。

终于介绍完啦！小伙伴们，这篇关于《JS语音合成实现全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！