Tableless

Busca Menu

Web Speech API – Reconhecimento de voz com JavaScript

Seja o primeiro a comentar por

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 “<div id=”transcription”>”

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.

Publicado no dia