Web Speech API: Reconhecimento de Fala - 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