SpeechSynthesisUtterance

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

SpeechSynthesisUtterance interface of the Web 语音 API represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)

构造函数

SpeechSynthesisUtterance.SpeechSynthesisUtterance()
返回新 SpeechSynthesisUtterance object instance.

特性

SpeechSynthesisUtterance also inherits properties from its parent interface, EventTarget .

SpeechSynthesisUtterance.lang
Gets and sets the language of the utterance.
SpeechSynthesisUtterance.pitch
Gets and sets the pitch at which the utterance will be spoken at.
SpeechSynthesisUtterance.rate
Gets and sets the speed at which the utterance will be spoken at.
SpeechSynthesisUtterance.text
Gets and sets the text that will be synthesised when the utterance is spoken.
SpeechSynthesisUtterance.voice
Gets and sets the voice that will be used to speak the utterance.
SpeechSynthesisUtterance.volume
Gets and sets the volume that the utterance will be spoken at.

Events

监听这些事件使用 addEventListener() 或通过把事件监听器赋值给 on eventname 特性为此接口。

boundary
Fired when the spoken utterance reaches a word or sentence boundary.
Also available via the onboundary 特性。
end
Fired when the utterance has finished being spoken.
Also available via the onend 特性。
error
Fired when an error occurs that prevents the utterance from being succesfully spoken.
Also available via the onerror property
mark
Fired when the spoken utterance reaches a named SSML "mark" tag.
Also available via the onmark 特性。
pause
Fired when the utterance is paused part way through.
Also available via the onpause 特性。
resume
Fired when a paused utterance is resumed.
Also available via the onresume 特性。
start
Fired when the utterance has begun to be spoken.
Also available via the onstart 特性。

范例

In our basic Speech synthesiser demo ( source ), we first grab a reference to the SpeechSynthesis controller using window.speechSynthesis . After defining some necessary variables, we retrieve a list of the voices available using SpeechSynthesis.getVoices() and populate a select menu with them so the user can choose what voice they want.

Inside the inputForm.onsubmit handler, we stop the form submitting with preventDefault() , use the 构造函数 to create a new utterance instance containing the text from the text <input> , set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the SpeechSynthesis.speak() 方法。

var synth = window.speechSynthesis;
var voices = synth.getVoices();
var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');
for(var i = 0; i < voices.length; i++) {
  var option = document.createElement('option');
  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
  option.value = i;
  voiceSelect.appendChild(option);
}
inputForm.onsubmit = function(event) {
  event.preventDefault();
  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  utterThis.voice = voices[voiceSelect.value];
  synth.speak(utterThis);
  inputTxt.blur();
}
					

规范

规范 状态 Comment
Web 语音 API
The definition of 'SpeechSynthesisUtterance' in that specification.
草案

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
SpeechSynthesisUtterance
Chrome 33 Edge ≤18 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
SpeechSynthesisUtterance() 构造函数
Chrome 33 Edge ≤18 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
boundary event
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
end event
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
error event
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
lang
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
mark event
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
onboundary
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
onend
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
onerror
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
onmark
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
onpause
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
onresume
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
onstart
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
pause event
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
pitch
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
rate
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
resume event
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
start event
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
text
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
voice
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0
volume
Chrome 33 Edge 14 Firefox 49 IE 不支持 No Opera 21 Safari 7 WebView Android 不支持 No Chrome Android 33 Firefox Android 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 7 Samsung Internet Android 3.0

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅