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…