Neste artigo, estarei mostrando um passo a passo de como configurar a API de controle de voz e utilizar o JavaScript para capturar o que é falado pelo usuário.
Antes de mais nada, durante está postagem as funcionalidades utilizadas estão em modo experimental e por isso não funcionaram em todos os navegadores. Veja aqui a lista de navegadores que dão suporte https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility. Mas se você usar o Chrome, não deverá ter problema.
A primeira coisa que faremos então é criar um arquivo html com:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Reconhecimento de Voz</title> </head> <body> <h1>Reconhecimento de Voz</h1> <button>Clique e Fale</button> <p>Resultado:</p> <p id="resultado"></p> <script src="script.js"></script> </body> </html>
E um arquivo JavaScript chamado script.js. Vamos faze-lo passo a passo
Primeiro vamos atribuir variáveis para os objetos SpeechRecognition e SpeechGrammarList
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; window.SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
Por enquanto ainda precisamos chamar ele ou o webkit para que tenhamos o objeto.
Segundo o MDN
A interface SpeechRecognition da Web Speech API é a interface do controlador para o serviço de reconhecimento; isso também manipula o SpeechRecognitionEvent enviado do serviço de reconhecimento.
A interface SpeechGrammarList da API Web Speech representa uma lista de objetos SpeechGrammar contendo palavras ou padrões de palavras que queremos que o serviço de reconhecimento reconheça.
Com isso, criaremos um evento que iniciará ao carregar o objeto window e nele começaremos instanciando objetos com o SpeechRecognition.
window.addEventListener("load", function () { let recognition = new window.SpeechRecognition();
após isso, precisamos fazer algumas configurações no objeto recognition
recognition.grammars = new window.SpeechGrammarList(); recognition.continuous = false; recognition.lang = 'pt-BR'; recognition.interimResults = false; recognition.maxAlternatives = 1;
onde:
- Grammars: São os padrões de linguagem que serão entendidos.
- Continuous: Define se vários resultados serão retornados com base no reconhecimento (true), ou se apenas um será retornado (false)
- Lang: A linguagem
- InterimResults: Se irá ou não retornar resultados parciais.
- MaxAlternatives: Número máximo de alternativas do SpeechRecognitionAlternative que serão retornadas.
Agora iremos definir os eventos para que o reconhecimento possa ser feito.
1) Inicia o reconhecimento ao clicar no botão:
document.querySelector("button").addEventListener('click', () =>{ recognition.start(); });
2) Encerra o reconhecimento ao observar que o usuário parou de falar:
recognition.addEventListener('speechend', () =>{ recognition.stop(); });
3) Caso de Erro:
recognition.addEventListener('error', (event) => { document.querySelector("#resultado").textContent = 'Erro no reconhecimento do texto: ' + event.error; });
4) Com base no resultado obtido, captura a parte do objeto deste resultado que possui o texto e o exibe em tela
recognition.onresult = function (event) { let last = event.results.length - 1; let texto = event.results[last][0].transcript; document.querySelector("#resultado").textContent = texto; }
Terminamos….. Agora é só testar clicando no botão da página HTML.
Como você pode ver, em apenas algumas linhas de código conseguimos utilizar a api para escrevermos na tela as coisas que são faladas quando você pressiona um botão
Caso precise do código js inteiro, ele segue abaixo:
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; window.SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList; window.addEventListener("load", function () { let recognition = new window.SpeechRecognition(); recognition.grammars = new window.SpeechGrammarList(); recognition.continuous = false; recognition.lang = 'pt-BR'; recognition.interimResults = false; recognition.maxAlternatives = 1; document.querySelector("button").addEventListener('click', () =>{ recognition.start(); }); recognition.addEventListener('speechend', () =>{ recognition.stop(); }); recognition.addEventListener('error', (event) => { document.querySelector("#resultado").textContent = 'Erro no reconhecimento do texto: ' + event.error; }); recognition.onresult = function (event) { let last = event.results.length - 1; let texto = event.results[last][0].transcript; document.querySelector("#resultado").textContent = texto; } });