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: