Aprenda a criar comando de voz para alavancar a experiência do seu site.
Já não é novidade que o HTML5 trouxe recursos incríveis para facilitar o desenvolvimento web. Hoje é possível manipular áudio e vídeo de maneira mais simples e as aplicações são infinitas. Neste artigo você vai aprender como capturar a voz do usuário através do microfone usando a API Speech Recognition.
Web Speech API o que é?
A Web Speech API foi lançada no final de 2012 e permite que os desenvolvedores forneçam a entrada de voz e recursos de saída de texto-para-voz em um navegador web. Esta API cuida da privacidade dos usuários, pois para acessar a voz através do microfone, o usuário deve explicitamente conceder a permissão. Curiosamente, o pedido de autorização é o mesmo que a API getUserMedia, apesar de não precisar da webcam. Se a página que executa esta API usa o protocolo HTTPS, o navegador solicita a permissão apenas uma vez.
O que vamos fazer com HTML5?
A API Speech Recognition captura o áudio gerado pelo microfone do usuário e transcreve, retornando uma string em sua resposta. Dessa forma você pode dizer a palavra “dark”, a API captura sua voz, reconhece a palavra e gera a string “dark” no seu resultado. Usaremos esse exemplo para controlar os temas de um site, quando alguém falar a palavra “dark” mudamos o tema para o modo dark ou modo noturno se preferir rsrs…
Vamos ao trabalho!!
Começando com o index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>API DE VOZ</title> <link rel="stylesheet" href="style.css" /> </head> <body> <button id="record"> Gravar </button> <h1 id="result">Diga "dark" ou "light" e veja a magica!</h1> <script src="main.js"></script> </body> </html>
Não tem muito que explicar aqui. É só um arquivo HTML comum com um botão, um H1 para mostrar o texto e a chamada para os arquivos externos (CSS e JS)
Agora vamos para o CSS, ele está comentado. Como é uma página bem simples não tem muito segredo. É só um botão centralizado e um texto h1 em baixo.
/* Reconfigurando o estilo padrão de todos os elementos HTML */ * { text-decoration: none; list-style: none; box-sizing: border-box; } /* Como não estou trabalhando com nenhma div resolvi reconfigurar o body e o HTML para fazer uma view que centralizar qualquer coisa utilizando flex-box. Para o ocupar a tela toda eu utilizei a propriedade flex 1 do flex-box. */ body, html { height: 100%; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; justify-content: center; flex: 1; flex-direction: column; transition: all linear 0.2s; } h1 { text-align: center; font-size: 23px; } button { width: 100px; height: 100px; appearance: none; -webkit-appearance: none; outline: none; border-radius: 50%; border: 1px solid #fff; background-color: red; cursor: pointer; text-transform: uppercase; font-size: 16px; color: #fff; line-height: 100px; margin-bottom: 30px; } button:active { background-color: #d60202; } /* Eu resolvi usar uma Class no body para trocar o tema. Dessa forma quando o body tiver a clase "dark" o background será #000 e a cor do texto do H1 sera #fff */ body.dark { background-color: #000; } body.dark h1 { color: #fff; }
Agora vamos para o JS. É aqui vamos tratar as APIs. Primeiro vamos guardar o botão e o H1 em uma variável global para ficar disponível em todo o doc.
const buttonRecord = document.getElementById("record"); const resultWrap = document.getElementById("result");
Agora vamos fazer uma verificação para validar se o navegador tem suporte a API de voz. veja…
// verifica se a API está disponível no objeto window if (window.SpeechRecognition || window.webkitSpeechRecognition) { //... tem suporte ... } else { // Se o navegador não tem suporte será exibida essa mensagem no H1 // O segundo comando esconde o botão gravar resultWrap.innerHTML = "Seu navegador não suporta HTML5"; buttonRecord.style.display = "none"; }
Agora vamos instanciar a API, configurar o idioma e o evento de click no botão.
// Cria uma nova instancia da API Speech Recognition const MySpeech = new webkitSpeechRecognition(); // Muda o idioma para portugues do Brasil MySpeech.lang = "pt-BR"; //Adiciona o evento de click no botão gravar buttonRecord.addEventListener('click', () => { // Try / Catch é uma estrutura de tentativa e erro. // Ele vai tentar utilizar o método start() // Se não conseguir ele cai no catch que gera uma caixa de alerta com o erro. try { // Método que inicia a captura de voz MySpeech.start(); resultWrap.innerHTML = 'Estou ouvindo...'; }catch(e) { alert('Erro: ' + e.message) } }, false);
Para finalizar nosso Arquivos JS vamos adicionar mais 2 eventos. O primeiro eventos é o de sucesso, ele é disparado quando a API captura voz. O segundo evento é um evento caso aconteça algum erro durante o processo.
// Vamos adicionar o eventos "result" no MySpeceeh. Esse evento tras um objeto com todo o resultado da api MySpeech.addEventListener('result', (event) => { //Aqui eu armazenando a string resultante do que foi dito. //Esse é o caminho para a string de transcrita const sentence = event.results[0][0].transcript; resultWrap.innerHTML = 'Voce disse: ' + sentence; //Aqui fazemos uma verificação //Se sentence for igual a dark //ou seja, se o a pessoa falar dark //Ent˜o adicionamos o a class dark no body if(sentence.toLowerCase() == 'dark') document.body.classList.add('dark') //Aqui fazemos uma verificação //Se sentence for igual a light //ou seja, se o a pessoa falar light //Então removemos o a class dark no body if (sentence.toLowerCase() == 'light') document.body.classList.remove('dark') }, false); // Aqui adicionamos o evento de erro. // Caso algo aconteça de errado esse evento será acionado. MySpeech.addEventListener('error', (event) => { resultWrap.innerHTML = 'Não entendi!'; }, false);
O arquivo final é esse…
(function() { const buttonRecord = document.getElementById("record"); const resultWrap = document.getElementById("result"); if (window.SpeechRecognition || window.webkitSpeechRecognition) { const MySpeech = new webkitSpeechRecognition(); MySpeech.lang = "pt-BR"; buttonRecord.addEventListener('click', () => { try { MySpeech.start(); resultWrap.innerHTML = 'Estou ouvindo...'; }catch(e) { alert('Erro: ' + e.message) } }, false); MySpeech.addEventListener('result', (event) => { const sentence = event.results[0][0].transcript; resultWrap.innerHTML = 'Voce disse: ' + sentence; if(sentence.toLowerCase() == 'dark') document.body.classList.add('dark') if (sentence.toLowerCase() == 'light') document.body.classList.remove('dark') }, false); MySpeech.addEventListener('error', (event) => { resultWrap.innerHTML = 'Não entendi!'; }, false); } else { resultWrap.innerHTML = "Seu navegador não suporta HTML5" buttonRecord.style.display = 'none'; } })();
Você pode conferir o funcionamento desse script na minha página do codepen.io bem aqui
See the Pen
Html5 Speech Recognition by raphael (@RaphaelCorrea)
on CodePen.
Essa é só uma das várias aplicações para comandos de voz. Você pode criar um site inteiro com comando para navegar, pode criar apps de inclusão, tradutores ou mesmo para aumentar a experiência de navegação dos seus usuários.
O que você achou desse post? Vai usar Speech Recognition API em algum projeto ? Me conta nos comentários.
Veja também: