SpeechSynthesis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.
网页语音 API 的**SpeechSynthesis
** 接口是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。
属性
SpeechSynthesis
也从它的父接口继承属性,EventTarget
.
SpeechSynthesis.paused
只读-
当
SpeechSynthesis
处于暂停状态时,Boolean
值返回true
。 SpeechSynthesis.pending
只读-
当语音播放队列到目前为止保持没有说完的语音时,
Boolean
值返回true
。 SpeechSynthesis.speaking
只读-
当语音谈话正在进行的时候,即使
SpeechSynthesis
处于暂停状态,Boolean
返回true
。
事件操作
方法
SpeechSynthesis
也从它的父接口继承方法, EventTarget
.
SpeechSynthesis.cancel()
-
移除所有语音谈话队列中的谈话。
SpeechSynthesis.getVoices()
-
返回当前设备所有可用声音的
SpeechSynthesisVoice
列表。 SpeechSynthesis.pause()
-
把
SpeechSynthesis
对象置为暂停状态。 SpeechSynthesis.resume()
-
把
SpeechSynthesis
对象置为一个非暂停状态:如果已经暂停了则继续。 SpeechSynthesis.speak()
-
添加一个
utterance
到语音谈话队列;它将会在其他语音谈话播放完之后播放。
示例
在我们基础的 Speech synthesiser 演示中,我们第一次用 window.speechSynthesis
抓取了关于语音播放控制器的参考。在定义了一些必要的变量后,我们用 SpeechSynthesis.getVoices()
获取了一列可用的声音并且用它们生成一列可选表单,这样用户能够选择他们想要的声音。
inputForm.onsubmit
的内部操作中,我们用preventDefault()阻止了表单的提交,创建了一个从<input>
文本框获取文本的新SpeechSynthesisUtterance
实例,在<select>
元素可选的声音设置成语音谈话的 voice 属性,然后通过SpeechSynthesis.speak()
方法开始语音播放。
var synth = window.speechSynthesis;
var inputForm = document.querySelector("form");
var inputTxt = document.querySelector(".txt");
var voiceSelect = document.querySelector("select");
var pitch = document.querySelector("#pitch");
var pitchValue = document.querySelector(".pitch-value");
var rate = document.querySelector("#rate");
var rateValue = document.querySelector(".rate-value");
var voices = [];
function populateVoiceList() {
voices = synth.getVoices();
for (i = 0; i < voices.length; i++) {
var option = document.createElement("option");
option.textContent = voices[i].name + " (" + voices[i].lang + ")";
if (voices[i].default) {
option.textContent += " -- DEFAULT";
}
option.setAttribute("data-lang", voices[i].lang);
option.setAttribute("data-name", voices[i].name);
voiceSelect.appendChild(option);
}
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
inputForm.onsubmit = function (event) {
event.preventDefault();
var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
var selectedOption = voiceSelect.selectedOptions[0].getAttribute("data-name");
for (i = 0; i < voices.length; i++) {
if (voices[i].name === selectedOption) {
utterThis.voice = voices[i];
}
}
utterThis.pitch = pitch.value;
utterThis.rate = rate.value;
synth.speak(utterThis);
inputTxt.blur();
};
规范
Specification |
---|
Web Speech API # tts-section |
浏览器兼容性
BCD tables only load in the browser