发布于 2026-01-06 2 阅读
0

使用语音合成 API 在 Javascript 中构建文本转语音应用程序

使用语音合成 API 在 Javascript 中构建文本转语音应用程序

欢迎来到这篇关于使用浏览器语音合成API进行文本转语音的快速教程!在本教程中,我将向您展示如何使用JavaScript和浏览器语音合成API将文本转换为语音。

什么是语音合成?

语音合成 API 是一个 JavaScript API,允许您将文本转语音 (TTS) 功能集成到 Web 应用程序中。它提供对合成语音的音色、音调、语速和音量的控制,让您可以灵活地调整语音输出的效果。此 API 支持 Chrome、Firefox 和 Edge 等现代浏览器。请务必查看文档以获取最新的兼容性信息。

语音合成 API 入门

要开始使用语音合成 API,请创建一个 HTML 文件并将以下代码添加到该文件中:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <main>
      <h1>Text To Speech</h1>
      <button onclick="speak()">Speak</button>
    </main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

然后,创建一个 JavaScript 文件(script.js),并将以下代码添加到该文件中:

function speak() {
  // Create a SpeechSynthesisUtterance
  const utterance = new SpeechSynthesisUtterance("Welcome to this tutorial!");

  // Select a voice
  const voices = speechSynthesis.getVoices();
  utterance.voice = voices[0]; // Choose a specific voice

  // Speak the text
  speechSynthesis.speak(utterance);
}
Enter fullscreen mode Exit fullscreen mode

之后,在浏览器中打开 HTML 文件,然后点击“朗读”按钮。你应该能听到文本朗读出来。如果没有听到任何声音,请检查控制台是否有任何错误。

注意:不同浏览器的语音可能有所不同。您可以通过将语音数组输出到控制台来查看浏览器中可用的语音列表。

演示:链接

感谢阅读!希望您喜欢这篇文章。欢迎在下方评论区分享您的想法。


如果你还没读过,一定要读!

更多内容请访问Dev.to。
来抓我吧

YouTube、 GitHub、 LinkedIn、 Medium、 Stackblitz、 Hashnode、 HackerNoon

文章来源:https://dev.to/devsmitra/convert-text-to-speech-in-javascript-using-speech-synthesis-api-223g