SpeechSynthesis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since setembro de 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.pausedSomente leitura-
Um
Booleanque retornatruese o objetoSpeechSynthesisestá em estado de pausa. SpeechSynthesis.pendingSomente leitura-
Um
Booleanque retornatruese a fila de elocuções contém falas que ainda não foram reproduzidas. SpeechSynthesis.speakingSomente leitura-
Um
Booleanque retornatruese uma elocução está sendo reproduzida atualmente — mesmo queSpeechSynthesisesteja em estado de pausa.
Tratamento de eventos
SpeechSynthesis.onvoiceschanged-
Disparado quando a lista de objetos
SpeechSynthesisVoiceque 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
SpeechSynthesisVoicerepresentando todas as vozes disponíveis no dispositivo atuall SpeechSynthesis.pause()-
Deixa o objeto
SpeechSynthesisem 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
Loading…