语音合成

基线广泛可用

此功能已得到完善，可在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用 2018 年 9 月.

SpeechSynthesis 是 Web 语音 API 的控制器接口；它可用于检索有关设备上可用的合成语音的信息、启动和暂停语音以及其他命令。

实例属性

SpeechSynthesis 还继承了其父接口 EventTarget 的属性。

SpeechSynthesis.paused 只读: 一个布尔值，如果 SpeechSynthesis 对象处于暂停状态，则返回 true。
SpeechSynthesis.pending 只读: 一个布尔值，如果话语队列包含尚未说出的话语，则返回 true。
SpeechSynthesis.speaking 只读: 一个布尔值，如果话语当前正在被说出，则返回 true，即使 SpeechSynthesis 处于暂停状态也是如此。

实例方法

SpeechSynthesis 还继承了其父接口 EventTarget 的方法。

SpeechSynthesis.cancel(): 从话语队列中删除所有话语。
SpeechSynthesis.getVoices(): 返回一个 SpeechSynthesisVoice 对象列表，表示当前设备上所有可用的语音。
SpeechSynthesis.pause(): 将 SpeechSynthesis 对象置于暂停状态。
SpeechSynthesis.resume(): 将 SpeechSynthesis 对象置于非暂停状态：如果它已暂停，则恢复它。
SpeechSynthesis.speak(): 将 话语 添加到话语队列；当排在其前面的任何其他话语都已说出时，它将被说出。

事件

使用 addEventListener() 或通过为该接口的 oneventname 属性分配事件侦听器来侦听此事件。

voiceschanged: 当 SpeechSynthesisVoice 对象列表（SpeechSynthesis.getVoices() 方法将返回该列表）发生更改时触发。也可通过 onvoiceschanged 属性获得。

示例

首先，一个简单的示例

let utterance = new SpeechSynthesisUtterance("Hello world!");
speechSynthesis.speak(utterance);

现在，我们将来看一个更完整的示例。在我们的语音合成演示中，我们首先使用 window.speechSynthesis 获取对 SpeechSynthesis 控制器的引用。在定义一些必要的变量后，我们使用 SpeechSynthesis.getVoices() 检索可用语音列表，并使用它们填充选择菜单，以便用户可以选择他们想要的语音。

在 inputForm.onsubmit 处理程序中，我们使用 preventDefault() 停止表单提交，创建一个新的 SpeechSynthesisUtterance 实例，其中包含来自文本 <input> 的文本，将话语的语音设置为在 <select> 元素中选择的语音，并通过 SpeechSynthesis.speak() 方法开始说出话语。

const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

let voices = [];

function populateVoiceList() {
  voices = synth.getVoices();

  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;

    if (voices[i].default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};

规范

规范
Web 语音 API # tts-section

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

Web 语音 API