前端文字转语音：用 Web Speech API 之 SpeechSynthesisUtterance 实现

是不是厌倦了网页只能靠“文字表情”传递信息？今天我们不玩文字、不玩图片，直接上语音！通过 Web Speech API 的魔法，让你的网页不仅能看，还能“说”。而我们的主角就是：SpeechSynthesisUtterance！

喊出咒语：“Hello, World!”（这次网页真的会说出来哦）。

什么是 SpeechSynthesisUtterance？

SpeechSynthesisUtterance 是 Web Speech API 的一个核心类，用来实现 Text-to-Speech（TTS，文字转语音）。简单来说，它的功能是把文字变成语音输出。配合 window.speechSynthesis，你可以轻松操控网页上的发声行为。

快速上手：让网页说“Hello, World!”

先来一个最简单的例子，几行代码让网页学会开口说话：

// Step 1: 创建一个 SpeechSynthesisUtterance 实例
const utterance = new SpeechSynthesisUtterance('Hello, World! 欢迎来到语音合成的世界！');
// Step 2: 设置语言和语音属性
utterance.lang = 'en-US'; // 设置语言为英语
utterance.pitch = 1;      // 设置音调（范围：0.5 - 2）
utterance.rate = 1;       // 设置语速（范围：0.1 - 10）
utterance.volume = 1;     // 设置音量（范围：0 - 1）
// Step 3: 调用 speechSynthesis 发声
window.speechSynthesis.speak(utterance);

运行后，网页就会用标准美式英语说出：“Hello, World!”。是不是很简单？

语音的高级玩法

1. 如何选择特定的语音？

有些开发者会发现，默认的语音听起来“有点无聊”，想换成更有趣的声音，比如英式英语的女性，或者中文普通话。要实现这个功能，我们需要用到 speechSynthesis.getVoices()。

示例代码：切换语音

// Step 1: 获取语音列表
const voices = window.speechSynthesis.getVoices();
// Step 2: 打印语音列表，看看有哪些选项
console.log(voices);
// Step 3: 创建并设置 utterance
const utterance = new SpeechSynthesisUtterance('你好，我是你最喜欢的语音！');
// 找到特定的语音（如中文普通话）
utterance.voice = voices.find(voice => voice.lang === 'zh-CN' && voice.name.includes('Google'));
// 调用发声
window.speechSynthesis.speak(utterance);

注意事项：

1. 语音库加载延迟：某些浏览器可能会延迟加载语音列表。解决办法是监听 voiceschanged 事件：

window.speechSynthesis.onvoiceschanged = () => {
  const voices = window.speechSynthesis.getVoices();
  console.log(voices); // 获取完整语音列表
};

1. 语音库不一致：不同浏览器的语音列表可能有所不同（详细见兼容性部分）。

2. 给语音添加暂停、恢复和停止功能

语音合成 API 提供了暂停（pause()）、恢复（resume()）和停止（cancel()）的功能。这在用户需要打断或重新播放时非常有用。

示例代码：

// 创建发声实例
const utterance = new SpeechSynthesisUtterance('This is a long speech that can be paused or stopped.');
// 开始发声
window.speechSynthesis.speak(utterance);
// 暂停发声
setTimeout(() => {
  window.speechSynthesis.pause();
  console.log('语音已暂停');
}, 2000);
// 恢复发声
setTimeout(() => {
  window.speechSynthesis.resume();
  console.log('语音已恢复');
}, 4000);
// 停止发声
setTimeout(() => {
  window.speechSynthesis.cancel();
  console.log('语音已停止');
}, 6000);

3. 动态设置不同语言的朗读内容

示例代码：多语言支持

const phrases = [
  { text: 'Hello, how are you?', lang: 'en-US' }, // 美式英语
  { text: 'Bonjour, comment ça va ?', lang: 'fr-FR' }, // 法语
  { text: '你好，你怎么样？', lang: 'zh-CN' }, // 中文
];
phrases.forEach(({ text, lang }) => {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = lang; // 设置语言
  window.speechSynthesis.speak(utterance);
});

兼容性问题和解决方法

尽管 SpeechSynthesisUtterance 非常强大，但它的兼容性还存在一些坑，以下是常见问题及解决办法：

1. 语音库不完整

有时在部分浏览器（如 Safari 或 Firefox）中，语音库可能不完整，导致找不到某些语音。

解决方案：

• 延迟加载语音库：监听 voiceschanged 事件（见上文）。
• 提供备用语音：如果找不到特定语音，可以设置一个默认语音：

  utterance.voice = voices.find(voice => voice.lang === 'en-US') || voices[0];
  

  ---

  2. 语言支持差异

  不同浏览器对语言的支持不一致。例如，zh-CN（中文普通话）在 Chrome 上支持很好，但 Safari 的表现可能不稳定。

  解决方案：

  • 提前检查可用语音：通过 speechSynthesis.getVoices() 检查是否支持目标语言。
  • 向用户提供语言选项：如果目标语言不可用，提示用户切换到其他语言。

    ---

    3. 语音播放问题

    某些情况下，语音可能无法播放，特别是在移动设备上（如 iOS Safari）。

    解决方案：

    
    （图片来源网络，侵删）
    • 用户交互触发：许多浏览器要求语音播放必须由用户操作触发，例如点击按钮。

      document.querySelector('#playButton').addEventListener('click', () => {
        const utterance = new SpeechSynthesisUtterance('Hello, this is triggered by a button click!');
        window.speechSynthesis.speak(utterance);
      });
      

      ---

      实用场景大开脑洞

      1. 在线教育：通过语音朗读单词或句子，帮助用户学习外语。
      2. 语音通知：在订单提交成功时，用语音通知用户。
      3. 游戏旁白：让游戏角色“亲自”说话，提升沉浸感。
      4. 无障碍支持：为视障用户提供重要的语音提示。

      ---

      总结

      SpeechSynthesisUtterance 是一个既简单又强大的工具，可以为你的网页带来前所未有的语音交互体验。虽然目前它在兼容性和语音库上还有些限制，但通过合理的检查和降级处理，你完全可以用它做出一个“会说话的网页”。

      准备好让你的网页“开口”了吗？快试试吧！

      
      （图片来源网络，侵删）
      
      （图片来源网络，侵删）