A nova API Web Speech JavaScript facilita a adição de reconhecimento de fala às suas páginas da Web. Essa API permite um controle preciso e flexibilidade com relação aos recursos de reconhecimento de fala no Google Chrome versão 25 e posterior. Veja um exemplo em que o texto reconhecido aparece quase imediatamente enquanto você fala.
Vamos dar uma olhada nos bastidores. Primeiro, vamos conferir se o navegador oferece suporte à API Web Speech, conferindo se o objeto webkitSpeechRecognition existe. Caso contrário, sugerimos que o usuário atualize seu navegador. Como a API ainda é experimental, ela tem 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 dele.
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 parar de falar, o reconhecimento de fala será encerrado. 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 pause 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 serão alterados. A demonstração a define como verdadeira para que possamos receber resultados provisórios e provisórios que podem mudar. Assista à demonstração com cuidado. O texto cinza é o texto provisório e às vezes muda, enquanto o texto em preto são respostas do reconhecedor marcadas como finais e que não serão alteradas.
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 para o reconhecedor de fala "lang" ao valor BCP-47 que o usuário selecionou na lista suspensa de seleção, por exemplo, “en-US” para inglês dos Estados Unidos. Se isso não for definido, o padrão será o idioma do elemento raiz do documento HTML e da hierarquia. O reconhecimento de fala do Chrome é compatível com vários idiomas (consulte a tabela langs na fonte da demonstração), além de alguns idiomas escritos da direita para a esquerda nã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 áudio, ele chama o manipulador de eventos onstart e, em seguida, para cada novo conjunto de resultados, ele 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 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 é completamente recriada cada vez 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 um evento global, para que esse evento possa iniciar a repetição for em event.resultIndex e anexar apenas qualquer novo texto final.
Pronto. O restante do código está lá apenas para deixar tudo ficar bonito. Ele mantém o estado, mostra ao usuário algumas mensagens informativas e troca a imagem GIF no botão do microfone entre o microfone estático, a imagem da barra de microfone e a animação do microfone com o ponto vermelho pulsante.
A imagem de barra do microfone é mostrada quando recognition.start() é chamado e substituída pela animação de microfone quando o onstart é acionado. Normalmente, isso acontece tão rapidamente que a barra não é perceptível. No entanto, na primeira vez que o reconhecimento de fala for usado, o Chrome precisa pedir ao usuário permissão para usar o microfone. Nesse caso, o onstart só é acionado quando e se o usuário permite. 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...
- Para comentários sobre a especificação da API W3C Web Speech: e-mail, arquivo de e-mails, grupo da comunidade
- Para comentários sobre a implementação dessa especificação no Chrome: e-mail, arquivo de mensagens
Consulte o Artigo de Privacidade do Chrome para saber como o Google lida com os dados de voz dessa API.