SpeechSynthesis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年9月.
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 |