Experimental
Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.
The SpeechSynthesisUtterance
interface of the Web Speech 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.)
Constructor
SpeechSynthesisUtterance.SpeechSynthesisUtterance()
- Returns a new
SpeechSynthesisUtterance
object instance.
Properties
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.
Event handlers
SpeechSynthesisUtterance.onboundary
- Fired when the spoken utterance reaches a word or sentence boundary.
SpeechSynthesisUtterance.onend
- Fired when the utterance has finished being spoken.
SpeechSynthesisUtterance.onerror
- Fired when an error occurs that prevents the utterance from being succesfully spoken.
SpeechSynthesisUtterance.onmark
- Fired when the spoken utterance reaches a named SSML "mark" tag.
SpeechSynthesisUtterance.onpause
- Fired when the utterance is paused part way through.
SpeechSynthesisUtterance.onresume
- Fired when a paused utterance is resumed.
SpeechSynthesisUtterance.onstart
- Fired when the utterance has begun to be spoken.
Examples
In our basic Speech synthesiser demo, 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 constructor
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()
method.
var synth = window.speechSynthesis;
var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');
var voices = synth.getVoices();
for(i = 0; i < voices.length ; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
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];
}
}
synth.speak(utterThis);
inputTxt.blur();
}
Specifications
Specification | Status | Comment |
---|---|---|
Web Speech API The definition of 'SpeechSynthesisUtterance' in that specification. |
Rascunho |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 33 | 49 (49) | Não suportado | ? | 7 |
Feature | Android | Chrome | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | Não suportado | 2.0 | Não suportado | Não suportado | 7.1 |