quarta-feira, 8 de abril de 2020

Como fazer sua Aplicação Web transformar texto em áudios (Text-To-Speech)

       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:


          Viu como é fácil?! Isso era o que eu tinha para esse post, até a próxima!