Web Speech API - Reconhecimento de fala em JavaScript

O reconhecimento de fala é gerenciado pelo objeto SpeechRecognition. Para acessá-lo, utiliza-se a propriedade webkitSpeechRecognition do objeto global window. Essa abordagem também pode ser usada para verificar se o navegador atual oferece suporte ao reconhecimento de fala:

if (window.webkitSpeechRecognition) {
  console.log("Reconhecimento de fala é suportado.");
} else {
  console.log("Reconhecimento de fala NÃO é suportado.");
}

// Outra forma de verificação
if ("webkitSpeechRecognition" in window) {
  console.log("Reconhecimento de fala é suportado.");
} else {
  console.log("Reconhecimento de fala NÃO é suportado.");
}

O prefixo webkit indica que essa funcionalidade é suportada apenas em navegadores baseados no motor WebKit, como o Google Chrome e o Safari. Por isso, em tais navegadores, o reconhecimento é realizado com o objeto webkitSpeechRecognition, em vez de SpeechRecognition.

Configuração do SpeechRecognition

O SpeechRecognition oferece várias propriedades para configuração do reconhecimento:

grammars: define ou retorna uma coleção de objetos SpeechGrammar, que representam as gramáticas utilizadas.
lang: define ou retorna o idioma para reconhecimento. Caso não especificado, utiliza o valor do atributo lang do elemento <html>.
continuous: determina se os resultados devem ser contínuos (true) ou limitados a um único resultado (false).
interimResults: define se resultados intermediários devem ser retornados (true) ou não (false).
maxAlternatives: estabelece o número máximo de alternativas para cada resultado. O padrão é 1.

Métodos para Controle

O SpeechRecognition oferece os seguintes métodos para controle do reconhecimento:

abort(): interrompe o reconhecimento sem tentar retornar resultados.
start(): inicia o reconhecimento.
stop(): finaliza o reconhecimento e tenta retornar resultados baseados no áudio já capturado.

Eventos do Reconhecimento

O SpeechRecognition emite vários eventos durante o processo de reconhecimento. Os principais são:

audiostart: captura de áudio iniciado.
audioend: captura de áudio finalizada.
end: serviço de reconhecimento desligado.
error: erro ocorrido.
nomatch: resultado final não corresponde ao esperado.
result: resultado retornado (palavra ou frase).
soundstart: som detectado (ruído ou fala).
soundend: detecção de som finalizada.
speechstart: fala detectada.
speechend: detecção de fala finalizada.
start: início da escuta pelo serviço de reconhecimento.

Acessando os Resultados

Para acessar os resultados, é necessário adicionar um manipulador para o evento result. No exemplo abaixo, o evento fornece uma lista de resultados que podem ser explorados para acessar o texto reconhecido e o nível de confiança:

const recognition = new webkitSpeechRecognition();
recognition.onresult = function (event) {
  const results = event.results; // Lista de resultados
  const firstResult = results[0]; // Primeiro resultado
  const firstAlternative = firstResult[0]; // Primeira alternativa
  const transcript = firstAlternative.transcript; // Texto reconhecido
  const confidence = firstAlternative.confidence; // Nível de confiança (0-1)
  console.log(transcript);
  console.log(confidence);
};

Exemplo Prático

Abaixo está uma página de exemplo que demonstra o uso do SpeechRecognition:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <title>Reconhecimento de Fala</title>
  </head>
  <body>
    <button id="startBtn">Iniciar</button>
    <button id="stopBtn">Parar</button>
    <script>
      const recognition = new webkitSpeechRecognition();
      let index = 0;

      recognition.onresult = function (event) {
        const results = event.results;
        const firstResult = results[index++];
        const firstAlternative = firstResult[0];
        const transcript = firstAlternative.transcript;
        const confidence = firstAlternative.confidence;
        console.log(transcript);
        console.log(confidence);
      };

      document.getElementById("startBtn").addEventListener("click", () => {
        if (window.webkitSpeechRecognition) {
          recognition.continuous = true;
          recognition.lang = "pt-BR"; // Define o idioma para português
          recognition.start();
        } else {
          console.log("Reconhecimento de fala NÃO é suportado.");
        }
      });

      document.getElementById("stopBtn").addEventListener("click", () => {
        recognition.stop();
        index = 0;
      });
    </script>
  </body>
</html>

Neste exemplo, ao clicar no botão Iniciar, o reconhecimento de fala em português é ativado, e os resultados são exibidos no console. O botão Parar interrompe o reconhecimento. Um contador index é utilizado para acessar resultados sucessivos, permitindo o gerenciamento adequado do evento result.

Ao iniciar o reconhecimento, o navegador solicitará permissão para usar o microfone. O usuário deve conceder acesso para que o reconhecimento funcione corretamente.

Aviso de permissão para uso do microfone

Documentação oficial: