Transcreva sua voz de forma nativa com Javascript – Web Speech API

Atualmente a transcrição de textos é algo comum para os usuários de smartphones. A SIRI,  o Google Now e a Cortana popularizaram essa prática. Mas na Web isso não é tão comum assim. As grandes empresas de tecnologia hoje nos oferecem API’s para esse serviço, mas não é algo muito barato e nem tão trivial assim integrar com as gigantes.

Mas e se os browsers nos fornecessem essa API de forma nativa, para que pudéssemos transcrever tudo o que o usuário fala em texto apenas com uma permissão simples e HTTPS? Muito mais fácil, certo?

Essa é a ideia da especificação da W3C para a Web Speech API, para que o browser nos forneça esse serviço de forma nativa e muito simples. Então, veremos logo abaixo como podemos implementar essa API em nosso dia a dia para facilitar a vida do usuário e aumentar muito a acessibilidade das nossas aplicações.

PASSO 1 – O HTML

A estrutura é muito simples, não vamos nos atentar a esses detalhes. Existe apenas um import do Material Design Lite para que a Demo não fique tão horrorosa, mas o que realmente importa são os nossos ID’s: TRANSCRIPTION e BUTTON-RECORD.

 

• TRANSCRIPTION – Onde será o resultado da fala do usuário;
• BUTTON-RECORD – O botão que receberá um listener para iniciar a gravação.

Verificando a disponibilidade

Como infelizmente apenas alguns browsers suportam a API, essa verificação é essencial. Confira aqui a documentação de suporte dos browsers. Nesse caso eu estou usando o Webpack e resolvi deixar o serviço em outro arquivo.

SpeechApi.js

 

 

 

main.js

 

 

 

 

 

Criando o método e utilizando a API

Após verificarmos se a API está disponível no browser, vamos criar uma classe responsável por gerenciar os métodos necessários.

Iniciamos com um construtor simples, apenas para buscarmos os elementos necessários da página, inicializamos algumas variáveis no escopo e instaciamos a SpeechAPI.

Essa instância nos dá 6 métodos principais:

• start – método responsável por inicializar o serviço;
• onstart – callback que nos avisa que o reconhecimento da fala começou;
• onend – callback disparado quando o usuário termina sua fala;
• stop – utilizado para finalizar o serviço;
• onresult – callback disparado quando a API retorna o resultado da fala;
• onerror – callback disporado se houver algum erro durante a transcrição.

Trabalharemos com os 5 primeiros métodos, mas é recomendado ter um handler para eventuais erros.

 

 

 

O método init é chamado caso ainda não exista nenhuma gravação, e se houver, o stop é chamado, cancelando a gravação.

 

 

 

 

 

Aqui temos uma estrutura que não segue nossas boas práticas, mas nos atende para esse fim.

Chamamos o método start e passamos algumas flags para a API:

• continuos – para que a API não finalize, mesmo que tenha pequenas pausas;
• interimResults – permite-nos decidir se queremos a transcrição em tempo real ou apenas após o término da fala;
• lang – define o idioma de reconhecimento.

Abaixo temos os métodos de Start, End e Result.

No método Result, recebemos um retorno no formato SpeechRecognitionEvent e nosso resultado estará dentro de results. Faremos um FOR, buscando por todos os resultados e inserindo this.transcript, então retornamos para a view passando o resultado no elemento.

Conclusão

Essa foi uma rápida pincelada sobre essa API, que não é tão nova assim, mas que pode nos ajudar a facilitar a vida de nossos usuários e agregar valor para acessibilidade.

Lembrando que devemos ter cuidado ao colocar essa API em produção, pois dependendo do seu público-alvo, o suporte ainda é parcial.

Abaixo deixo os links para a documentação, a especificação na W3C e também todo o código no Github:

Documentação Mozilla

Especificação W3C

Code

Até a próxima!