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:
Passo 1 – Estrutura HTML:
A estrutura HTML é bem simples, vejamos a marcação abaixo:
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:
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:
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.
Agora iremos definir a função “onresult” que define um callback que é disparado quando o reconhecedor de voz retorna um resultado.
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 :
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.
