JavaScript 代码中的文本到语音 - JavaScript

在 Web 应用程序中，语音输出逐渐成为一种流行的功能，尤其是在那些需要一些额外的互动方式的应用程序中。本篇文章将介绍如何使用 JavaScript 将文本转换为语音。这是通过调用浏览器内置的语音 API 实现的。

浏览器内置的语音 API

现代浏览器通常都支持 Web Speech API，该接口由SpeechSynthesisUtterance和window.speechSynthesis对象组成。

SpeechSynthesisUtterance用于创建单个语音输出任务，该任务包含语音输出的文本，以及一些其他的控制属性，如语速、语调等等。示例代码如下：

const msg = new SpeechSynthesisUtterance();
msg.text = "Hello, World!";
window.speechSynthesis.speak(msg);

window.speechSynthesis用于全局控制语音输出相关设置，如关闭、暂停语音输出等等。

将文本转换为语音

无论您是想要将一个固定的短语转换为语音，还是想要将用户输入的文本转换为语音，都可以通过使用SpeechSynthesisUtterance来实现。

将固定文本转换为语音

下面是一个简单的例子，它将一个固定的短语转换为语音输出：

const msg = new SpeechSynthesisUtterance();
msg.text = "Welcome to our website. How can we help you today?";
window.speechSynthesis.speak(msg);

将用户输入的文本转换为语音

下面的代码演示了如何将用户输入的文本转换为语音：

document.querySelector("button").addEventListener("click", () => {
  const inputText = document.querySelector("input").value;
  const msg = new SpeechSynthesisUtterance();
  msg.text = inputText;
  window.speechSynthesis.speak(msg);
});

控制语音输出属性

您可以通过设置SpeechSynthesisUtterance对象的属性，来控制语音输出的各个方面，如语速、音调、音量等。下面的代码演示了如何控制语音输出的语速和音调：

const msg = new SpeechSynthesisUtterance();
msg.text = "The quick brown fox jumped over the lazy dog.";
msg.rate = 1.5; // 设置语速为1.5倍
msg.pitch = 2; // 设置音调为2倍
window.speechSynthesis.speak(msg);

结论

通过使用SpeechSynthesisUtterance和window.speechSynthesis对象，您可以轻松地将文本转换为语音，并控制语音输出的各个方面。这对于 Web 应用程序中需要额外互动方式的场景非常有用。