Arquivos SpeechGrammarList

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;
    }
});

Tag: SpeechGrammarList

API de Controle de Voz