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 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
Specification |
---|
Web Speech API # tts-section |
Compatibilidade com navegadores
BCD tables only load in the browser