Experimental
Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.
A interface SpeechSynthesis
da Web Speech API é a interface controladora para o serviço de fala; este pode ser usado para obter informações sobre as vozes sintetizadas disponíveis no dispositivo, reproduzir e pausar uma elocução, além de outros comandos.
Propriedades
SpeechSynthesis
também herda propriedades da sua interface pai, EventTarget
.
SpeechSynthesis.paused
Somente leitura- Um
Boolean
que retornatrue
se o objetoSpeechSynthesis
está em estado de pausa. SpeechSynthesis.pending
Somente leitura- Um
Boolean
que retornatrue
se a fila de elocuções contém falas que ainda não foram reproduzidas. SpeechSynthesis.speaking
Somente leitura- Um
Boolean
que retornatrue
se uma elocução está sendo reproduzida atualmente — mesmo queSpeechSynthesis
esteja em estado de pausa.
Tratamento de eventos
SpeechSynthesis.onvoiceschanged
- Disparado quando a lista de objetos
SpeechSynthesisVoice
que pode ser retornada pelo métodoSpeechSynthesis.getVoices()
mudou.
Métodos
SpeechSynthesis
também herda métodos da sua interface pai, EventTarget
.
SpeechSynthesis.cancel()
- Remove todas as elocuções da fila para reprodução.
SpeechSynthesis.getVoices()
- Retorna uma lista de objetos
SpeechSynthesisVoice
representando todas as vozes disponíveis no dispositivo atuall SpeechSynthesis.pause()
- Deixa o objeto
SpeechSynthesis
em estado de pausa. SpeechSynthesis.resume()
- Retira o estado de pausa do objeto
SpeechSynthesis
: retoma a reprodução se ele estiver pausado. SpeechSynthesis.speak()
- Adiciona uma
utterance
à fila de reprodução; ela será reproduzida assim que todas as elocuções enfileiradas anteriormente tenham sido reproduzidas.
Exemplos
Na nossa demonstração básica Speech synthesiser demo, nós primeiro pegamos uma referência para o controlador SpeechSynthesis usando window.speechSynthesis
. Após definir algumas variáveis necessárias, nós obtemos uma lista de vozes disponíveis usando o método SpeechSynthesis.getVoices()
usando-as para popular um menu de seleção de forma que o usuário possa escolher a voz que desejar.
Dentro do tratamento inputForm.onsubmit
, nós impedimos a submissão do formulário com preventDefault(), instanciamos uma SpeechSynthesisUtterance
contendo o texto presente no <input>
, atribuímos a voz da elocução para a voz selecionada no elemento <select>
, e iniciamos a reprodução da elocução através do método 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();
}
Especificações
Especificação | Situação | Comentários |
---|---|---|
Web Speech API The definition of 'SpeechSynthesis' in that specification. |
Rascunho |
Compatibilidade de Navegadores
Característica | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Suporte básico | 33 | (Yes) | 49 (49) | Não suportado | ? | 7 |
Característica | Android | Chrome | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Suporte básico | (Yes) | (Yes) | (Yes) | Não suportado | 2.0 | Não suportado | Não suportado | 7.1 |