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.
}
inputForm. => {
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 |
浏览器兼容性
Loading…