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

A nova API Web Speech JavaScript facilita a adição de reconhecimento de fala às suas páginas. Essa API permite um controle preciso e flexibilidade sobre os recursos de reconhecimento de fala no Chrome 25 e versões posteriores. Aqui está um exemplo com o texto reconhecido aparecendo quase imediatamente ao falar.

Demonstração da API Web Speech

DEMONSTRAÇÃO / ORIGEM

Vamos dar uma olhada em detalhes. Primeiro, verificamos se o navegador oferece suporte à API Web Speech conferindo se o objeto webkitSpeechRecognition existe. Caso contrário, sugerimos que o usuário atualize o navegador. Como a API ainda é experimental, ela tem como prefixo do fornecedor. Por fim, criamos o objeto webkitSpeechRecognition, que fornece a interface de fala, e definimos alguns 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 é falso, o que significa que, quando o usuário parar de falar, o reconhecimento de fala vai ser encerrado. Esse modo é ótimo para textos simples, como campos de entrada curtos. Nesta demonstração, nós o configuramos como "true" para que o reconhecimento continue mesmo que o usuário faça uma pausa enquanto fala.

O valor padrão de interimResults é falso, o que significa que os únicos resultados retornados pelo reconhecedor são finais e não serão alterados. Como a demonstração é definida como verdadeira, recebemos resultados provisórios antecipados que podem mudar. Assista à demonstração com cuidado. O texto cinza é provisório e pode mudar, enquanto o texto preto é uma resposta do reconhecedor marcada como final e não vai mudar.

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

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

Definimos o idioma falado do reconhecedor de fala como "lang" como o valor BCP-47 selecionado pelo usuário na lista suspensa, por exemplo, “en-US” para inglês (Estados Unidos). Se isso não for definido, o padrão será o idioma do elemento raiz e da hierarquia do documento HTML. O reconhecimento de fala do Chrome é compatível com vários idiomas (consulte a tabela “langs” na fonte da demonstração), bem como alguns idiomas escritos 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. Depois de começar a capturar o áudio, ele chama o manipulador de eventos onstart e, em seguida, 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 gerenciador 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". Portanto, usamos a função linebreak para convertê-las em tags HTML <br> ou <p>. Por fim, ele define essas strings como o HTML interno 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 é completamente 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 a repetição "for" em 0. No entanto, como o texto final nunca muda, tornamos o código um pouco mais eficiente, tornando final_transcript global, para que esse evento possa iniciar a repetição for em event.resultIndex e anexar apenas qualquer texto final novo.

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

A imagem de microfone com barra é exibida quando recognition.start() é chamado e substituída por uma animação de microfone quando onstart é disparado. Normalmente, isso acontece tão rapidamente que a barra não é perceptível. No entanto, na primeira vez que o reconhecimento de fala é usado, o Chrome precisa pedir ao usuário permissão para usar o microfone. Nesse caso, onstart só é acionado quando o usuário permite a permissão. As páginas hospedadas em HTTPS não precisam pedir permissão repetidamente, ao contrário das páginas hospedadas em HTTP.

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

Adoraríamos receber seu feedback...

Consulte o Artigo de Privacidade do Chrome para saber como o Google lida com dados de voz desta API.