Web Speech API – Reconhecimento de voz com JavaScript

Imagine websites onde os usuários podem navegar pelas páginas ou preencher campos de formulário usando a sua voz e até mesmo interagir com a página enquanto dirige, sem tirar os olhos da estrada.

por Clovis Neto 06/10/2014 Comentários

O reconhecimento de voz tem várias aplicações no mundo real. Muitas pessoas tornaram-se familiarizadas com este conceito graças a softwares como o Siri e S-Voice. Esta aplicação pode melhorar drasticamente a usabilidade dos websites, principalmente para deficientes visuais. Imagine websites onde os usuários podem navegar pelas páginas ou preencher campos de formulário usando a sua voz e até mesmo interagir com a página enquanto dirige, sem tirar os olhos da estrada.

O que é Web Speech API?

A Web Speech API foi lançada no final de 2012 e permite que os desenvolvedores forneçam a entrada de voz e recursos de saída de texto-para-voz em um navegador web. Esta API cuida da privacidade dos usuários, pois antes de deixar o site para acessar a voz através do microfone, o usuário deve explicitamente conceder a permissão. Curiosamente, o pedido de autorização é o mesmo que a API getUserMedia, apesar de não precisar da webcam. Se a página que executa esta API usa o protocolo HTTPS, o navegador solicita a permissão apenas uma vez.

Então veremos logo abaixo, um exemplo básico de como podemos implementar esta nova API aos nossos projetos:

Criando a primeira página com reconhecimento de voz:

Passo 1 – Estrutura HTML:

A estrutura HTML é bem simples, vejamos a marcação abaixo:

<p id="ola">Olá tableless, você falou:</p>

<div id="transcription"></div>

<button id="rect">Gravar</button>

<span id="unsupported" class="hidden">API not supported</span>

Onde:

  • Transcription – Onde se encontrará o texto informando oque o usuário falou
  • Rect – Botão para reconhecer a voz do usuário
  • unsupported – Caso a API não seja suportada pelo browser

Passo 2 – Testando

Como qualquer API, temos que verificar primeiramente se o browser suporta SpeechRecognition:

// Test browser support
window.SpeechRecognition = window.SpeechRecognition ||
window.webkitSpeechRecognition ||
null;

//caso não suporte esta API DE VOZ            
if (window.SpeechRecognition === null) {
    document.getElementById('unsupported').classList.remove('hidden');
}else {
    //......
}

Passo 3 – Métodos e propriedades

Depois de testar a compatibilidade da API, iremos instanciar o reconhecedor de  voz, usando o speechRecognition(). Como o código listado abaixo:

var recognizer = new window.SpeechRecognition();

Este objeto expõe os seguintes métodos:

  • onstart: Define um callback que é disparado quando o serviço de reconhecimento começou a ouvir o áudio com a intenção de reconhecer.
  • onResult: Define um callback que é disparado quando o reconhecedor de voz retorna um resultado.
  • onerror: Define um callback que é acionado quando ocorre um erro de reconhecimento de voz.
  • onend: Define um callback que é disparado quando o serviço foi desligado. O evento deve sempre ser gerado quando a sessão termina, não importa o que a razão.

Iremos criar uma varável que será responsável por exibir o texto que o usuário falou e também iremos definir a propriedade continuous = true, que faz com que o reconhecedor de voz não pare de ouvir, mesmo que tenha pausas do usuário.

var transcription = document.getElementById("transcription");

            //Para o reconhecedor de voz, não parar de ouvir, mesmo que tenha pausas no usuario
            recognizer.continuous = true;

Agora iremos definir a função “onresult” que define um callback que é disparado quando o reconhecedor de voz retorna 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.results[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 um pouco mais detalhadamente:

transcription.textContent = “”;    Faz com que limpe o texto que se encontra dentro da “

for (var i = event.resultIndex; i < event.results.length; i++) {  Loop que pecorre o evento que contém o texto que o usuário falou.

Note que dentro deste loop, há uma condição, que verifica se o evento se encontra na última posição (event.results[i].isFinal), caso seja verdadeira, ele irá imprimir todo o texto, junto com a taxa de acerto, que vai de “0” até “1”. Caso seja falsa, ele vai adicionar mais texto na nossa div

Passo 4 – Anexando o evento de click

Agora iremos anexar um evento de click, ao nosso botão, segue 0 código abaixo :

document.querySelector("#rect").addEventListener("click",function(){
                try {
                    recognizer.start();
                  } catch(ex) {
                    alert("error: "+ex.message);
                  }
            });

Onde:

recognizer.start(); – Inicia o record ( a gravação );

catch(ex) {

alert(“error: “+ex.message);

} –  tratamento de log, caso exista, algum erro de gravação

É importante observarmos que o reconhecedor demora um pouco para poder interpretar a sua voz, mais ou menos uns 3 à 4 segundos, esta API ainda está em teste e que infelizmente até agora, só é  suportada no chrome,

Finalizando

Bem pessoal, essa foi uma breve introdução sobre Web Speech API. Futuramente irei trazer mais artigo

Disponibilizei o código no github e também disponibilizei uma demo.

Clique aqui para ver a demo online

Clique aqui, para ir ao código completo.