SpeechSynthesisUtterance

基线广泛可用

此功能已经成熟，并且可以在许多设备和浏览器版本中使用。它自 2018 年 9 月.

报告反馈

构造函数

SpeechSynthesisUtterance(): SpeechSynthesisUtterance 是 Web 语音 API 中的接口，表示语音请求。它包含语音服务应读取的内容以及有关如何读取它的信息（例如语言、音调和音量）。

实例属性

返回一个新的 SpeechSynthesisUtterance 对象实例。

SpeechSynthesisUtterance 也从其父接口 EventTarget 继承属性。: SpeechSynthesisUtterance.lang
获取和设置语句的语言。: SpeechSynthesisUtterance.pitch
获取和设置语句的语调。: SpeechSynthesisUtterance.rate
获取和设置语句的语速。: SpeechSynthesisUtterance.text
获取和设置语句朗读时要合成的文本。: SpeechSynthesisUtterance.voice
获取和设置用于朗读语句的声音。: SpeechSynthesisUtterance.volume

事件

获取和设置语句的音量。

boundary: 使用 addEventListener() 或通过将事件侦听器分配给此接口的 oneventname 属性来侦听这些事件。
end: 当朗读的语句到达单词或句子边界时触发。也可以通过 onboundary 属性访问。
error: 当语句朗读完毕时触发。也可以通过 onend 属性访问。
mark: 当发生错误阻止语句成功朗读时触发。也可以通过 onerror 属性访问。
pause: 当朗读的语句到达名为 SSML 的 "mark" 标签时触发。也可以通过 onmark 属性访问。
resume: 当语句在朗读过程中暂停时触发。也可以通过 onpause 属性访问。
start: 当暂停的语句恢复朗读时触发。也可以通过 onresume 属性访问。

示例

当语句开始朗读时触发。也可以通过 onstart 属性访问。

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

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

const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

let voices;

function loadVoices() {
  voices = synth.getVoices();
  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;
    option.value = i;
    voiceSelect.appendChild(option);
  }
}

// in Google Chrome the voices are not ready on page load
if ("onvoiceschanged" in synth) {
  synth.onvoiceschanged = loadVoices;
} else {
  loadVoices();
}

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

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  utterThis.voice = voices[voiceSelect.value];
  synth.speak(utterThis);
  inputTxt.blur();
};

规范

js
Web 语音 API # 规范

浏览器兼容性

speechsynthesisutterance

另请参阅

Web 语音 API