Criando um simples Voice Recognition com JavaScript
Fala galera tudo bem? Fazia um tempo que não parava para escrever novos conteúdos, e hoje resolvi parar pelo menos 5 minutinhos para compartilhar em poucas linhas de código JavaScript, algo novo que aprendi recentemente e que me causou aquele sentimento maravilhoso chamado "mind-blowing".
Basicamente nesse post, será explicado como construir um simples comando de voz com JavaScript usando API do WebKit (em específico será usado o objeto webkitSpeechRecognition).
Na prática, vamos criar um simples código que vai capturar tudo que for falado no microfone, e como resultado final qualquer frase dita será transcrito em uma string, e com base nesse simples código, tenho certeza que você terá infinitas possibilidades de interações, como por exemplo, criar comando de voz para caso seja falado uma palavra específica seja executado tal funçãozinha marota!
Sem mais enrolações, crie num arquivo HTML (o index.html já basta!) com a seguinte estrutura:
E pronto! Nesse código acima já apresento de forma bem simplificada como iniciar o reconhecimento de voz e principalmente como capturar palavras ou frases ditas no microfone, para no final elas serem transcritas em string, lembrando que é importante configurar o idioma que deseja trabalhar, nesse caso estou usando recognition.lang = 'pt-BR' justamente para facilitar a API do WebKit detectar de forma mais precisa as palavras faladas no microfone no idioma correto.
Aaahh! Com base nesse código, você já será capaz de criar comandos, afinal basta pegar o conteúdo de event.results[i][0].transcript.trim() e comparar se tal string é igual a alguma string específica para executar suas funções, como por exemplo:
if (event.results[i][0].transcript.trim() === 'play') {
executarVideo();
}E para finalizar, recentemente lancei um ebook na plataforma Leanpub com uma coletânea bem legal com dicas e truques úteis para você aplicar no JavaScript/Node.js, em cada dica, é apresentado um problema com respectivas soluções através de muito código prático.
Mais detalhes acesse: https://many.link/jsawesometips
Espero que tenham gostado desse mini post, e em breve publicarei novas dicas com JavaScript! Tanto aqui no Medium quanto no meu blog UDGWebDev, até a próxima!
