Âmbito

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.