SpeechSynthesis

Experimental

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

Tratamento de eventos

SpeechSynthesis.onvoiceschanged (en-US)
Disparado quando a lista de objetos SpeechSynthesisVoice (en-US) que pode ser retornada pelo método SpeechSynthesis.getVoices() (en-US) mudou.

Métodos

SpeechSynthesis também herda métodos da sua interface pai, EventTarget.

SpeechSynthesis.cancel() (en-US)
Remove todas as elocuções da fila para reprodução.
SpeechSynthesis.getVoices() (en-US)
Retorna uma lista de objetos SpeechSynthesisVoice (en-US) representando todas as vozes disponíveis no dispositivo atuall
SpeechSynthesis.pause() (en-US)
Deixa o objeto SpeechSynthesis em estado de pausa.
SpeechSynthesis.resume() (en-US)
Retira o estado de pausa do objeto SpeechSynthesis: retoma a reprodução se ele estiver pausado.
SpeechSynthesis.speak() (en-US)
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() (en-US) 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() (en-US).

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 com navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)
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