Converter voz em texto e executar comando por voz com JavaScript

Na dica de hoje vamos mostrar como converter uma fala em texto com javascript puro, utilizando recurso nativo do dispositivo. A API Web Speech permite que aplicação web acessem o microfone e com isso nos possibilita o reconhecimento de fala, dai podemos transcrever em texto ou criar estruturas de comandos de voz. Para deixar nosso exemplo mais interessante vamos também colocar uma estrutura, exemplo de comando por voz, assim nosso projeto além de transcrever o que estamos falando, também irá executar comandos previamente definidos para executar duas funções simples, que serão: mostrar a hora atual e abrir o YouTube em uma nova janela.

Com este recurso podemos criar uma infinidade de aplicativos, desde um editor de texto baseado em voz, que nos permite escrever textos sem digitar, também podemos desenvolver sistemas que executam funções baseado na fala do operador, sistemas que interagem conversando com o usuário e muitas outras aplicações.

Lembrando que a SoloWeb desenvolve soluções personalizadas para sua empresa ou negócio, como também fornece hospedagem de sites com servidores VPS ou Dedicados personalizados, otimizados e com segurança. Acesse e confira soloweb.com.br

Então vamos a dica de hoje, iniciando com um código simples HTML

   <div style="padding:20px">

      <h1>Converter voz para texto</h1> 
      <img src="https://www.iconpacks.net/icons/1/free-microphone-icon-342-thumb.png" width="25px" />
      
      <button class="btn btn-success" id="btnStart">Iniciar</button>      
      <button class="btn btn-danger" id="btnStop">Parar</button>      
      
   </div>     
      
   <p>
   Corpo do texto:  
   </p>   
      
   <div class="texto" style="padding:20px">    
   </div>  

Atenção para os dois botões, que iram iniciar e para a captura do microfone. Teremos um resultado parecido com isso:

Agora vamos para nosso código java script.

// cria as constantes que referencia os botões e a área de texto onde iremos transcrever o áudio
const texto = document.querySelector(".texto");
const btnStart = document.querySelector("#btnStart");
const btnStop = document.querySelector("#btnStop");

// configurar o webkit de reconhecimento de fala
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = "pt-BR";

// criando uma nova tag p
let p = document.createElement("p");

Um ponto importante, até aqui é definir os resultados provisórios como verdadeiro ( recognition.interimResults = true; ). Os resultados provisórios visto nesta linha nos permitem obter os resultados quando falamos, então é algo como em tempo real. Se definirmos como false, ele simplesmente esperará até terminarmos de falar e retornará o resultado, mas para este tutorial, queremos ter nossos resultados enquanto falamos.

Seguimos agora com um bloco de código onde vamos monitorar o nosso reconhecimento de voz.

// crie um ouvinte de eventos para nosso reconhecimento
recognition.addEventListener("result", (e) => {
  // mapeamento através da lista de fala para juntar palavras
  const text = Array.from(e.results)
    .map((result) => result[0])
    .map((result) => result.transcript)
    .join("");
 

  // para iniciar um novo parágrafo
  if (e.results[0].isFinal) {
    
    let isCommand = false;

    // aqui vamos testar criar nosso camando por voz
    if (text.includes("Hora Certa") || text.includes("hora certa") ) {
      
      isCommand = true;
      
      // Obtem a hora atual
      var data = new Date();
      
      var hora    = data.getHours();          
      var min     = data.getMinutes();        
      var seg     = data.getSeconds();        
           

      var str_hora = hora + ':' + min + ':' + seg;
      // Mostra o resultado
      alert('Hora certa: ' + str_hora);
      
    }
    if (text.includes("Abrir YouTube") || text.includes("abrir youtube") ) {      
      isCommand = true;    
      window.open('https://youtube.com/', '_blank');              
    }    
    
    if(!isCommand){
    	// se não houve identificação de algum comando escreve o texto na área esperada
    	p.innerText = text;
    	texto.appendChild(p);  
    }
    // recria o parágrafo    
    p = document.createElement("p");
    
  }
});

Neste bloco, a cada consolidação de um parágrafo vamos testar se foi falado algum dos nossos comandos que são: “Hora Certa” e “Abrir YouTube”, que iram executar respectivamente a exibição da hora atual e o outro irá abrir o YouTube em uma nova aba.

Vamos finalizar nosso código java script com a adição dos eventos aos botões e a nossa instância do reconhecimento de fala.

// terminar a sessão antiga para iniciar uma nova
recognition.addEventListener("end", () => {
  recognition.start();
});

btnStart.addEventListener("click", () => {
  recognition.start();
});

btnStop.addEventListener("click", () => {
  recognition.abort();
});  

Agora vamos testar nossa aplicação e ver os resultados.

Observe que nossa aplicação transcreveu nossa fala e ao falar “hora certa” nosso sistema executou o comando esperado e exibiu o horário atual.

Agora vamos testar em um dispositivo móvel.

Funcionando como esperado! Este foi apenas um exemplo simples, mas que demostra o reconhecimento de fala com Java script utilizando recursos nativos, a partir dai surgem possibilidades infinitas de aplicações que podem usufruir deste recurso, esperamos ter ajudado e siga nos para mais dicas como esta.