SpeechSynthesis

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.

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.

SpeechSynthesis.onvoiceschanged

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

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.

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();
}

• Web Speech API