Apps da Web baseados em voz: introdução à API Web Speech

A nova API JavaScript Web Speech facilita a adição de reconhecimento de fala às suas páginas da Web. Essa API permite controle e flexibilidade sobre os recursos de reconhecimento de fala no Chrome versão 25 e mais recentes. Confira um exemplo com o texto reconhecido aparecendo quase imediatamente enquanto você fala.

Demonstração da API Web Speech

DEMONSTRAÇÃO / CÓDIGO-FONTE

Vamos dar uma olhada nos detalhes. Primeiro, verificamos se o navegador oferece suporte à API Web Speech verificando se o objeto webkitSpeechRecognition existe. Caso contrário, sugerimos que o usuário atualize o navegador. Como a API ainda é experimental, ela está atualmente com um prefixo de fornecedor. Por fim, criamos o objeto webkitSpeechRecognition, que fornece a interface de fala, e definimos alguns dos atributos e manipuladores de eventos.

if (!('webkitSpeechRecognition' in window)) {
    upgrade();
} else {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onstart = function() { ... }
    recognition.onresult = function(event) { ... }
    recognition.onerror = function(event) { ... }
    recognition.onend = function() { ... }
    ...

O valor padrão de continuous é "false", o que significa que, quando o usuário para de falar, o reconhecimento de fala termina. Esse modo é ótimo para textos simples, como campos de entrada curtos. Nesta demonstração, definimos como "true" para que o reconhecimento continue mesmo que o usuário faça uma pausa enquanto fala.

O valor padrão de interimResults é "false", o que significa que os únicos resultados retornados pelo reconhecedor são finais e não vão mudar. A demonstração o define como "true" para que possamos receber resultados provisórios que podem mudar. Assista a demonstração com atenção. O texto cinza é provisório e às vezes muda, enquanto o texto preto são respostas do reconhecedor marcadas como finais e que não vão mudar.

Para começar, o usuário clica no botão do microfone, que aciona este código:

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

Definimos o idioma falado para o reconhecedor de fala "lang" como o valor BCP-47 que o usuário selecionou na lista suspensa de seleção, por exemplo, "en-US" para inglês (Estados Unidos). Se não estiver definido, o padrão será o idioma do elemento raiz e da hierarquia do documento HTML. O reconhecimento de fala do Chrome oferece suporte a vários idiomas (consulte a tabela "langs" no código-fonte da demonstração), bem como alguns idiomas da direita para a esquerda que não estão incluídos nesta demonstração, como he-IL e ar-EG.

Depois de definir o idioma, chamamos recognition.start() para ativar o reconhecedor de fala. Quando ele começa a capturar áudio, chama o manipulador de eventos onstart e, para cada novo conjunto de resultados, chama o manipulador de eventos onresult.

recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            final_transcript += event.results[i][0].transcript;
        } else {
            interim_transcript += event.results[i][0].transcript;
        }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    };
}

Esse manipulador concatena todos os resultados recebidos até o momento em duas strings: final_transcript e interim_transcript. As strings resultantes podem incluir "\n", como quando o usuário fala "novo parágrafo". Por isso, usamos a linebreak para convertê-las em tags HTML <br> ou <p>. Por fim, ela define essas strings como o innerHTML dos elementos <span> correspondentes: final_span, que é estilizado com texto preto, e interim_span, que é estilizado com texto cinza.

interim_transcript é uma variável local e é totalmente recriada sempre que esse evento é chamado, porque é possível que todos os resultados provisórios tenham mudado desde o último evento onresult. Podemos fazer o mesmo para final_transcript simplesmente iniciando o loop "for" em 0. No entanto, como o texto final nunca muda, tornamos o código um pouco mais eficiente ao fazer de final_transcript uma variável global, para que esse evento possa iniciar o loop "for" em event.resultIndex e anexar apenas um novo texto final.

Pronto! O restante do código está lá apenas para deixar tudo bonito. Ele mantém o estado, mostra algumas mensagens informativas ao usuário e troca a imagem GIF no botão do microfone entre o microfone estático, a imagem do microfone com barra e o microfone animado com o ponto vermelho pulsante.

A imagem do microfone com barra é mostrada quando recognition.start() é chamada e, em seguida, substituída pelo microfone animado quando onstart é acionado. Normalmente, isso acontece tão rapidamente que a barra não é perceptível, mas, na primeira vez que o reconhecimento de fala é usado, o Chrome precisa pedir permissão ao usuário para usar o microfone. Nesse caso, onstart só é acionado quando e se o usuário permitir. As páginas hospedadas em HTTPS não precisam pedir permissão repetidamente, enquanto as páginas hospedadas em HTTP precisam.

Então, dê vida às suas páginas da Web permitindo que elas ouçam seus usuários.

Adoraríamos receber seu feedback.

Consulte Entender a privacidade no Chrome para conferir nossa Política de Privacidade (atualizada em 16 de junho de 2026).