This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 retorna true se o objeto SpeechSynthesis está em estado de pausa.
SpeechSynthesis.pending Somente leitura
Um Boolean que retorna true se a fila de elocuções contém falas que ainda não foram reproduzidas.
SpeechSynthesis.speaking Somente leitura
Um Boolean que retorna true se uma elocução está sendo reproduzida atualmente — mesmo que SpeechSynthesis esteja em estado de pausa.

Tratamento de eventos

SpeechSynthesis.onvoiceschanged
Disparado quando a lista de objetos SpeechSynthesisVoice que pode ser retornada pelo método SpeechSynthesis.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

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: _marciojrtorres
 Última atualização por: _marciojrtorres,