SpeechSynthesis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.

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 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().

js
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

Specification
Web Speech API
# tts-section

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também