SpeechSynthesis - 表示语音服务的控制器接口

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

SpeechSynthesisWeb Speech API 的接口,表示语音服务的控制器接口;它可用于检索有关设备上可用的合成语音,开始和暂停语音以及其他命令的信息。

属性

SpeechSynthesis 还从其父接口 EventTarget 继承了属性。

SpeechSynthesis.paused 只读

一个 Boolean,如果 SpeechSynthesis 对象处于暂停状态,则返回 true

SpeechSynthesis.pending 只读

一个 Boolean,如果语音队列中包含尚未发出的语音,则返回 true

SpeechSynthesis.speaking 只读

一个 Boolean,如果当前正在发声,会返回 true(即使 SpeechSynthesis 处于暂停状态)。

方法

SpeechSynthesis 还从其父接口 EventTarget 继承了方法。

SpeechSynthesis.cancel()

从语音队列中删除所有语音。

SpeechSynthesis.getVoices()

返回 SpeechSynthesisVoice 对象的列表,这些对象表示当前设备上的所有可用语音。

SpeechSynthesis.pause()

SpeechSynthesis 对象更改为暂停状态。

SpeechSynthesis.resume()

SpeechSynthesis 对象更改为非暂停状态:如果已经暂停,则恢复它。

SpeechSynthesis.speak()

utterance 添加到语音队列中;在说完其他语音之后,就会将其说出来。

事件

使用 addEventListener() 或通过为此接口的 oneventname 属性分配事件监听器来监听这些事件

voiceschanged

SpeechSynthesisVoice 方法将返回的 SpeechSynthesisVoice 对象列表更改时触发。也可以通过 onvoiceschanged 属性处理。

实例

在基本的语音合成器实例中,我们首先使用 window.speechSynthesis 来获取对 SpeechSynthesis 控制器的引用。定义了一些必要的变量后,我们使用 SpeechSynthesis.getVoices() 检索可用的语音列表,并使用它们填充到选择菜单,以便用户可以选择所需的语音。

inputForm.onsubmit 处理程序中,我们使用 preventDefault() 来停止提交表单;创建一个新的 SpeechSynthesisUtterance 实例,其中包含来自 <input> 的文本;将语音的声音设置为在 <select> 元素中;然后通过 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();
}

规范

规范 状态 备注
Web Speech API
SpeechSynthesis 的定义
草稿 -

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持33≤1849 不支持217
cancel331449 不支持217
getVoices331449 不支持217
onvoiceschanged331449 不支持 不支持 不支持
pause331449 不支持217
paused331449 不支持217
pending331449 不支持217
resume331449 不支持217
speak331449 不支持217
speaking331449 不支持217
voiceschanged 事件331449 不支持217

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持4.4.333 未知

62

61 — 62

未知 不支持7
cancel4.4.333 未知

62

61 — 62

未知 不支持7
getVoices4.4.333 未知

62

61 — 62

未知 不支持7
onvoiceschanged4.4.333 未知

62

61 — 62

未知 不支持 不支持
pause4.4.31331 未知

621

61 — 621

未知 不支持7
paused4.4.333 未知

62

61 — 62

未知 不支持7
pending4.4.333 未知

62

61 — 62

未知 不支持7
resume4.4.333 未知

62

61 — 62

未知 不支持7
speak4.4.333 未知

62

61 — 62

未知 不支持7
speaking4.4.333 未知

62

61 — 62

未知 不支持7
voiceschanged 事件4.4.333 未知

62

61 — 62

未知 不支持7

1. 在 Android 中,pause() 结束当前的发声。 pause() 的行为与 cancel() 相同。

相关链接