A nova API Web Speech JavaScript facilita a adição do reconhecimento de fala às suas páginas da Web. Essa API permite controle e flexibilidade sobre os recursos de reconhecimento de voz no Chrome versão 25 e mais recentes. Confira um exemplo em que o texto reconhecido aparece quase imediatamente enquanto a pessoa fala.
Vamos dar uma olhada nos bastidores. 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 tem o prefixo do fornecedor. Por fim, criamos o objeto webkitSpeechRecognition, que fornece a interface de fala, e definimos alguns dos atributos e gerenciadores 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 para de falar, o reconhecimento de fala é encerrado. Esse modo é ótimo para textos simples, como campos de entrada curtos. Nesta demonstração, definimos como "verdadeiro" 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 vão mudar. A demonstração define o valor como "true" para que possamos ter resultados provisórios que podem mudar. Assista à demonstração com atenção. O texto cinza é provisório e pode mudar. Já 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 do reconhecedor de voz "lang" como o valor BCP-47 que o usuário selecionou na lista suspensa, por exemplo, "en-US" para inglês dos Estados Unidos. Se não for definido, o padrão será o lang do elemento raiz e da hierarquia do documento HTML. O reconhecimento de voz do Chrome oferece suporte a vários idiomas (consulte a tabela "langs" na fonte da demonstração), além de 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, ele 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 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". Por isso, 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 tem estilo com texto preto, e interim_span, que tem estilo com texto cinza.
interim_transcript é uma variável local e é recriada completamente toda 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 o loop "for" em 0. No entanto, como o texto final nunca muda, tornamos o código um pouco mais eficiente ao tornar final_transcript 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 ao usuário algumas mensagens informativas e troca a imagem do GIF no botão do microfone entre o microfone estático, a imagem do microfone com uma barra e o microfone animado com o ponto vermelho pulsante.
A imagem de microfone riscado é mostrada quando recognition.start() é chamada e depois substituída por mic-animate quando onstart é acionado. Isso geralmente acontece tão rápido que o caractere de 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, ao contrário das páginas hospedadas em HTTP.
Então, faça suas páginas da Web ganharem vida permitindo que elas ouçam seus usuários.
Queremos saber sua opinião.
- Para comentários sobre a especificação da API Web Speech do W3C: e-mail, arquivo de envio de e-mails, grupo da comunidade
- Para comentários sobre a implementação desta especificação no Chrome: e-mail, arquivo de envio de e-mails
Consulte o Artigo de Privacidade do Chrome para saber como o Google está processando os dados de voz dessa API.