SpeechSynthesis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.

Web 语音 API 的 SpeechSynthesis 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，以及除此之外的其他命令。

实例属性

SpeechSynthesis 也从其父接口 EventTarget 继承属性。

SpeechSynthesis.paused 只读: 布尔值，如果 SpeechSynthesis 对象处于暂停状态，则返回 true。
SpeechSynthesis.pending 只读: 布尔值，如果语音播放队列包含没有说完的语音，则返回 true。
SpeechSynthesis.speaking 只读: 布尔值，如果正在播放语音内容（即使 SpeechSynthesis 处于暂停状态），则返回 true。

实例方法

SpeechSynthesis 也从其父接口 EventTarget 继承方法。

SpeechSynthesis.cancel(): 从语音队列中移除所有语音。
SpeechSynthesis.getVoices(): 返回表示当前设备所有可用语音的 SpeechSynthesisVoice 对象列表。
SpeechSynthesis.pause(): 将 SpeechSynthesis 对象置为暂停状态。
SpeechSynthesis.resume(): 将 SpeechSynthesis 对象置为非暂停状态：如果已经暂停了则恢复播放。
SpeechSynthesis.speak(): 将语音添加到语音队列，它将会在其他语音播放完之后播放。

事件

使用 addEventListener() 或将事件监听器赋值到该接口的 oneventname 属性来监听此事件。

voiceschanged: 当 SpeechSynthesis.getVoices() 方法将要返回的 SpeechSynthesisVoice 对象列表发生变化时触发。也可以通过 onvoiceschanged 属性访问。

示例

首先，一个例子：

let utterance = new SpeechSynthesisUtterance("你好世界！");
speechSynthesis.speak(utterance);

现在，我们来看一个更完整的示例。在我们的语音合成器演示中，我们首先使用 window.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 (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name}（${voice.lang}）`;

    if (voice.default) {
      option.textContent += "——默认";
    }

    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.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 (const voice of voices) {
    if (voice.name === selectedOption) {
      utterThis.voice = voice;
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};

规范

Specification
Web Speech API # tts-section

浏览器兼容性

参见

Web 语音 API