Nesse post eu vou falar
sobre algo muito útil, a transformação de texto em voz em aplicações web. Sabe quando você quer fazer aqueles paineis de chamada de clientes, ou mesmo ler um texto para o usuário por questões de acessibilidade? Quando
pensamos nisso achamos que pode ser algo muito complexo né? Na verdade é algo
bem simples!
Os
navegadores já trazem por padrão um reprodutor de áudio pronto para ser usado
via JavaScript, basta passar as frases e o navegador irá reproduzir na linguagem
na qual está configurado. Também é possível configurar outras línguas.
OBS: Por questões de privacidade, os navegadores passaram a obrigar uma interação do usuário com a página para permitir a emissão de sons. Por isso, é importante pensar em um botão que possa ser usado uma primeira vez quando a página for carregada ao invés da função onload usada no exemplo.
(editado em 03/07/2022)
Vamos ver esse simples código:
<html>
<body>
<h1
id="speech">Olá, bem vindo ao blog "Olá Mundo -
Java"</h1>
</body>
<script>
/**
*
* @author Daniel Oliveira
*/
function
reproduzirNome(){
var
falar = document.getElementById('speech');
var synth = window.speechSynthesis;
var utterNome = new SpeechSynthesisUtterance();
var utterSala = new SpeechSynthesisUtterance();
utterNome.volume
= 1; // 0 to 1
utterNome.rate
= 1; // 0.1 to 10
utterNome.pitch
= 1.5; // 0 to 2
utterNome.lang
= "pt-PT";
for(var
i = 0;i < 2; i++){
sleep(1000);
utterNome.text
= falar.textContent; //campos input pega-se o "value"
sleep(1000);
synth.speak(utterNome);
}
}
function
sleep(milliseconds) {
const
date = Date.now();
var
currentDate = null;
do
{
currentDate
= Date.now();
}
while (currentDate - date < milliseconds);
}
window.onload
= reproduzirNome();
</script>
</html>
Basta pegar esse código e colocar em um projeto seu para
ver funcionando. Uma observação importante é que qualquer áudio ou vídeo para
ser reproduzido automaticamente precisa de permissão do usuário. Essa permissão
é dada no navegador no cadeado(se for https) ou no “i” (se for http) ao lado do
endereço:
Existem outras configurações de controles, tipo de voz, etc,
basta dar uma pesquisada nos links abaixo:
