当前位置：首页 > 文章列表 > 文章 > 前端 > 手把手教你用JS实现文字转语音，轻松搞定WebSpeechAPI

手把手教你用JS实现文字转语音，轻松搞定WebSpeechAPI

2025-06-12 21:42:44 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

想知道如何用JS实现文字转语音吗？本文将手把手教你使用Web Speech API，轻松搞定网页语音合成！通过JavaScript，你可以利用浏览器内置的SpeechSynthesis，创建SpeechSynthesisUtterance对象，并使用speechSynthesis.speak()方法将文字转化为声音。更进一步，你还可以通过调整volume、rate、pitch属性来控制音量、语速和音调，甚至通过speechSynthesis.getVoices()获取并切换不同的语音。但要注意Web Speech API也存在一些局限性，比如浏览器兼容性问题，以及对网络连接的依赖性。掌握这些技巧，让你的网页“开口说话”！

JavaScript 中实现文字转语音最直接的方式是使用 Web Speech API 的 SpeechSynthesis。1. 通过创建 SpeechSynthesisUtterance 对象并调用 speechSynthesis.speak() 方法实现基础语音合成；2. 使用 volume、rate、pitch 属性分别控制音量（0-1）、语速（默认 1）和音调（默认 1）；3. 通过 speechSynthesis.getVoices() 获取可用语音列表，并异步设置 voice 属性以切换语音；4. Web Speech API 的局限包括浏览器兼容性、部分功能依赖网络、语音质量参差、文本长度限制及错误处理不完善，如需更高要求可考虑第三方服务。

js怎样实现文字转语音 Web Speech API语音合成

实现文字转语音，JavaScript 中最直接的方式就是使用 Web Speech API 的语音合成功能，也就是 SpeechSynthesis。它允许你通过浏览器内置的语音引擎将文本转换成语音。

function textToSpeech(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(utterance);
}

// 调用示例
textToSpeech("你好，世界！");

这段代码创建了一个 SpeechSynthesisUtterance 对象，并将要转换的文本传递给它。然后，speechSynthesis.speak() 方法会触发语音合成并播放。

如何调整语音的音量、语速和音调？

SpeechSynthesisUtterance 对象提供了多种属性来控制语音的输出效果。你可以调整 volume（音量，0 到 1 之间）、rate（语速，正常语速是 1）、和 pitch（音调，正常音调是 1）。

function textToSpeechAdvanced(text, volume = 1, rate = 1, pitch = 1) {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.volume = volume;
  utterance.rate = rate;
  utterance.pitch = pitch;
  speechSynthesis.speak(utterance);
}

// 调用示例：降低音量，加快语速
textToSpeechAdvanced("这是一段测试文本。", 0.5, 1.5);

注意，不同的浏览器和操作系统对这些属性的解释可能略有不同，所以实际效果可能会有一些差异。

如何选择不同的语音？

Web Speech API 允许你选择不同的语音（voices）。你可以通过 speechSynthesis.getVoices() 方法获取可用的语音列表。这个方法返回一个 SpeechSynthesisVoice 对象的数组。

function getAvailableVoices() {
  return new Promise(resolve => {
    let voices = speechSynthesis.getVoices();
    if (voices.length) {
      resolve(voices);
      return;
    }
    // 有些浏览器需要监听 voiceschanged 事件才能获取语音列表
    speechSynthesis.onvoiceschanged = () => {
      voices = speechSynthesis.getVoices();
      resolve(voices);
    };
  });
}

async function textToSpeechWithVoice(text, voiceName) {
  const voices = await getAvailableVoices();
  const selectedVoice = voices.find(voice => voice.name === voiceName);

  if (!selectedVoice) {
    console.warn(`Voice "${voiceName}" not found.`);
    textToSpeech(text); // 使用默认语音
    return;
  }

  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice = selectedVoice;
  speechSynthesis.speak(utterance);
}

// 调用示例：使用 "Microsoft Xiaoxiao - Chinese (Simplified)" 语音
textToSpeechWithVoice("你好，世界！", "Microsoft Xiaoxiao - Chinese (Simplified)");

这段代码首先异步获取可用的语音列表。然后，它查找指定名称的语音，并将其设置为 SpeechSynthesisUtterance 对象的 voice 属性。如果找不到指定的语音，则会使用默认语音。

需要注意的是，语音列表可能需要一些时间才能加载完成。因此，通常需要监听 voiceschanged 事件，或者使用 Promise 来确保语音列表已经准备好。另外，不同浏览器提供的语音种类也会有所不同。在 Chrome 中，语音列表通常会立即返回，而在 Firefox 中，可能需要等待 voiceschanged 事件触发。