Atualmente, o reconhecimento de voz tem várias aplicações no mundo real. O conceito de reconhecimento de voz está subjacente a softwares como o Siri e S-Voice. Esta aplicação pode melhorar drasticamente a usabilidade dos websites, principalmente para deficientes visuais. Por conseguinte, os utilizadores podem navegar pelas páginas ou preencher campos de formulário utilizando a sua voz.
Introdução
A API Web Speech é uma API de reconhecimento de voz que está implementada no Chrome 25 e superiores. A API Web Speech foi lançada no final de 2012 e fornece a entrada de voz e recursos de saída de texto para voz num web browser. Esta API tem em conta a privacidade dos utilizadores, pois antes de ativar a voz através do microfone, o utilizador deve explicitamente conceder a permissão. O pedido de autorização é o mesmo que a API getUserMedia, apesar de não necessitar da webcam. Se a página que executa esta API usa o protocolo HTTPS, o browser solicita a permissão apenas uma vez. De seguida é apresentado um exemplo básico de como implementar esta API.
Primeira página com reconhecimento de voz
Estrutura HTML
A estrutura HTML é muito simples:
<p id="olá">Olá mundo!</p> <div id="transcription"></div> <button id="rect">Gravar</button> <span id="unsuported" class="hidden">API not supported</span>
O atributo transcription
contém o texto que informa o que utilizador falou. O botão rect
é o botão utilizado para reconhecer a voz do utilizador. O atributo unsupported
é utilizado caso a API não seja suportada pelo browser.
Teste
A API Web Speech contempla um objeto chamado SpeechRecognition
. Para saber se o browser suporta SpeechRecognition
basta verificar se este objeto existe:
// Testa se o browser suporta windows.SpeechRecognition = Window.SpeechRecognition || Window.webkitSpeechRecognition || null; //Caso não suporte esta API de voz if(window.SpeechRecognition === null) { document.getElementById('unsuported').classList.remove('hidden'); } else { //... }
Métodos e propriedades
Depois de testar o suporte e compatibilidade da API é criada uma instância do objeto SpeechRecognition
.
var recognizer = new window.SpeechRecognition();
Este objeto tem os seguintes métodos:
onstart
- Define um callback que é disparado quando o serviço de reconhecimento começou a ouvir o áudio para reconhecimento.
onResult
- Define um callback que é disparado quando o reconhecedor de voz devolve um resultado.
onerror
- Define um callback que é acionado quando ocorre um erro de reconhecimento de voz.
onend
- Define um callback que é disparado sempre que o serviço é desligado (o evento é gerado quando a sessão termina).
Por conseguinte foi criada uma variável com a função de exibir o texto que o utilizador falou. Para a API reconhecer a fala continuamente é necessário colocar a propriedade continuous
como true
. Esta propriedade faz com que o reconhecedor de voz não pare de ouvir, mesmo que tenha pausas do utilizador.
var transcription = document.getElementById("transcription"); //Para o reconhecedor de voz não parar de ouvir, mesmo que tenha pausas do utilizador recognizer.continuous = true;
Posteriormente existe a função onresult
que define um callback que é disparado quando o reconhecedor de voz devolve um resultado.
recognizer.onresult = function (event) { transcription.textContent = ""; for (var i = event.resultIndex; i < event.results.length; i++) { if (event.results[i].isFinal) { transcription.textContent = event.result[i][0].transcript + ' (taxa de acerto [0/1] : ' + event.results[i][0].confidence + ')'; } else { transcription.textContent += event.results[i][0].transcript; } } }
Vamos analisar este código com mais detalhe:
A propriedade results
é um array de objetos em que cada item do array contém um possível resultado do reconhecimento de voz. Para verificar se já é um resultado final utiliza-se a propriedade isFinal
que é booleana.
transcription.textContent
faz com que o texto dentro da <div id="transcription">
seja limpo.
for (var i = event.resultIndex; i < event.results.length; i++)
é o ciclo que percorre o evento que contém o texto que o utilizador falou.
Dentro deste ciclo há uma condição que verifica se o evento se encontra na última posição (event.results[i].isFinal
). Caso seja verdadeira, é imprimido todo o texto, junto com a taxa de acerto, que varia entre 0 e 1. Caso seja falsa, é adicionado mais texto à div
.
Evento de click
Por conseguinte, foi criado um evento de click associado ao botão:
document.querySelector("#rect").addEventListener( "click", function () { try { recognizer.start(); } catch (ex) { alert("error: " + ex.message); } } );
Onde:
recognizer.start()
inicia a gravação
e
catch(ex) { alert(“error: “+ex.message); }
faz o tratamento de log, caso exista, algum erro de gravação.
Conclusão
Esta foi uma breve explicação com a implementação da primeira página com reconhecimento de voz. Para o efeito foi utilizada a API Web Speech de JavaScript. Esta API é uma mais-valia porque facilita muito a integração de sistemas de reconhecimento de voz em sites.