Busca por voz utilizando web speech api

Nesse post veremos como fazer uma pesquisa de voz utilizando web speech api. Uma API do HTML5  poderosa presente no seu navegador.

Em outro post nos abordamos o funcionamento da web speech api, você pode conferir clicando aqui. Nesse artigo vamos ver mais um caso de uso interessante para diversas aplicações web.

Sobre o projeto desse post.

Antes de por a mão na massa vamos entender antes qual é a ideia desse projeto. Imagine que você tem uma loja virtual e quer melhorar a experiência dos seus usuários. Para isso você inicia uma serie de pesquisas com seus usuários, nela, você percebe que os resultados de busca da sua loja não é tão bom. O nome dos seus produtos é muito longo, ou difícil, e o usuário acaba não digitando corretamente alguns termos. Por exemplo “blusa tshirt feminina vermelha”

Para melhora a busca do seu e-commerce você começa a implementar diversas melhorias e uma delas é a busca por voz. Agora o usuário pode clicar em um botão, falar o termo que deseja buscar e por fim ter um resultado de busca de acordo com o termo buscado/falado.

Começando a implementar a busca por voz.

Antes de começar vamos considerar uma API pronto que receber um termo e retorna uma lista de produtos. Não vamos nos aprofundar na parte de busca dentro do bakck-end. A ideia aqui é mais o trabalho do front-end de captura de voz.

Vamos começar adicionando um botão para ativar a busca por voz no HTML, além disso, vamos colocar também um modal que indica quando a API está ouvindo ou não o usuário.

....
<button id="mic"><i class="fas fa-microphone"></i></button>
....

<div class="modal">
  <div class="content">
    <i class="fas fa-microphone"></i>
    <h3>Ouvindo...</h3>
  </div>
</div>

...

Agora um pequeno trecho de CSS para estilizar o modal.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.ativo {
  display: flex;
  padding: 20px;
}

.modal .content {
  width: 400px;
  height: 400px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #ccc;
}

.modal .content i {
  font-size: 60px;
}

Agora o JavaScript. Vamos começar verificando se API está disponível para o seu navegador, posso fazer isso com um if.

...

if (window.SpeechRecognition || window.webkitSpeechRecognition) {
 ...
} else {
   alert('Seu navegador não suporta API de voz')
}

...

A seguir, o código mais completo seguido de alguns comentários descrevendo o que cada linha faz.

if (window.SpeechRecognition || window.webkitSpeechRecognition) {

  const micButton = document.getElementById("mic"); // Guarda o botão na const 
  const modal = document.querySelector('.modal'); // Guarda o modal na const 
  const modalLabel = document.querySelector('.modal h3'); // Guarda o H3 na const 

  const MySpeech = new webkitSpeechRecognition(); // Instancia a API SpeechRecognition 
  MySpeech.lang = "pt-BR"; // Define a linguágem a ser processada

  // Função que será executada quando clicar no botão mic 
  const clickOnMicButton = () => {
    modal.classList.add('ativo'); // Add a classe ativo no modal. Com essa classe ele é mostrado em tela 

    try {
      MySpeech.start(); // Tenta iniciar o MySpeech 
    } catch (error) {

      // Caso aconteça algo de errado será exibido um alerta, o modal fechará e um console de erro no terminal.
      alert('Algo deu errado. Tente novamente');
      console.error(error);
      modal.classList.remove('ativo');
    }
  };

  // Função executa quando obtemos um resultado positivo da API.
  const onMySpeechResult = (event) => {
    const sentense = event.results[0][0].transcript; // Palavra/sentensa que a API reconheceu
    modalLabel.innerHTML = `Você disse "${sentense}"`; // Altera o texto do modal 
    
    // Faz uma requisição para sua API de busca 
    fetch(`/search?q=${sentense}`)
    .then( resp  => resp.json())
    .then(data => {
      /* 
        O parametro DATA contem uma lista de produtos. 
        Aqui você pode fazer a listagem em tela dos produtos 
        fazendo um data.map( item => <Componente>);
        ou algo do tipo.
      */
    })
    .catch(error => console.error(error));
   
  };

  MySpeech.addEventListener("result", onMySpeechResult);
  micButton.addEventListener("click", clickOnMicButton);
}

Você pode conferir um exemplo funcional desse código no meu perfil do CodePen.io.

See the Pen
Voice search by Raphael Correa (@RaphaelCorrea)
on CodePen.

Gostou? Então comenta ai o que você achou.