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();
};

规范

浏览器兼容性

参见

• Web 语音 API