Window：speechSynthesis 属性

基线广泛可用

此功能已经很成熟，并且可以在许多设备和浏览器版本上运行。它自以下时间起在各个浏览器中都可用： 2018年9月.

speechSynthesis 是 Window 对象的只读属性，它返回一个 SpeechSynthesis 对象，该对象是使用 Web 语音 API 语音合成功能的入口点。

值

一个 SpeechSynthesis 对象。

示例

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

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

const synth = window.speechSynthesis;

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

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 += " — DEFAULT";
    }

    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");
  utterThis.voice = voices.find((v) => v.name === selectedOption);
  synth.speak(utterThis);
  inputTxt.blur();
};

规范

规范
Web 语音 API # tts-section

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

Web 语音 API