Criando um aplicativo que utilize reconhecimento de fala.

Joel Garcia Jr
4 min readAug 26, 2018

Reconhecimento de fala, do ponto de vista computacional é basicamente um software de computador ou um dispositivo de hardware que pode decodificar a voz humana. É geralmente usado para executar comandos, operar dispositivos ou escrever sem ter que usar um mouse, teclado ou pressionar nenhum botão.

Atualmente pode-se automatizar quase todas as tarefas utilizando comandos de voz e reconhecimento de fala, que vão desde acender a luz até agendar um horário no salão de beleza. Tais tarefas podem ser executadas por assistentes pessoais já disponíveis no mercado como é o caso da, Siri — Apple, Cortana — Microsoft, Alexia — Amazon e Google Assistant.

Recentemente tive o prazer de desenvolver um aplicativo móvel para uma escola de idiomas que implementava estes recursos dispostos em 3 formas. O aplicativo lê o enunciado do exercício em voz alta, grava e reconhece a voz do aluno em resposta ao exercício e opcionalmente lê em voz alta a resposta correta e a dita pelo aluno. Foi utilizado como referência o famoso app Duolingo.

Neste post irei abordar como integrar o reconhecimento de fala nativo e a síntese de fala no navegador usando a API JavaScript WebSpeech .

De acordo com a documentação Mozilla:

A Web Speech API permite incorporar dados de voz em aplicativos da web. A Web Speech API tem duas partes: SpeechSynthesis (Texto para Fala) e SpeechRecognition (Reconhecimento de Fala Assíncrono).

O app foi construído utilizando Ionic Framework( AngularJS ) e plugins cordova, tendo como layout da tela de um dos exercícios a imagem abaixo:

Tela com exercício já respondido.

Basicamente o funcionamento se dá da seguinte forma: no primeiro momento quando o aluno toca sobre o enunciado do exercício que geralmente é uma pergunta ou sobre o ícone "HeadPhones", o app faz a leitura do mesmo em voz alta.

Imagine o quão complexo seria gravar todas as questões, para então disponibiliza-las, imagine a quantidade de armazenamento, horas de gravação, pronúncia etc. Sendo assim, a solução foi pedir ao computador para fazer isso da seguinte forma: quando o aluno toca na pergunta o texto da mesma é passado como argumento para o método speak de TTS ( Text to speech, ou , texto para fala). Este método requer o parâmetro ‘locale’, que é uma string que identifica o idioma do texto a ser lido. O parâmetro rate indica a velocidade que o texto será lido pelo dispositivo.

$scope.listenText = function(textToBeRead){

TTS.speak({
text: textToBeRead,
locale: 'en-US',
rate: 1.00
}, function () {
console.log("Finished Ok");
}, function (reason) {
console.log("ERRO NA FALA", JSON.stringify( reason ) );
});

}

Quando o aluno toca em ‘Record My Voice’, o objeto webkitSpeechRecognition é criado e o microfone aberto para que o aluno possa falar, assim que ele termina de falar, o que ele disse é colocado na tela, assim ele pode comparar sua pronúncia com a resposta do exercício.

Caso aconteça algum erro nesta etapa, lançamos mão novamente do TTS, fazendo o dispositivo falar a frase: “Sorry, could you please repeat?”, isso gera interatividade entre o aplicativo e o aluno, literalmente uma conversa. Esse processo quando feito utilizando fones de ouvido fica ainda mais mágico! ❤

O aluno pode ainda tocar na frase que acabou de dizer assim como na resposta correta e compara-las, ao fazer isso o dispositivo lê em voz alta cada uma delas. Essa funcionalidade permite ao aluno treinar sua fala até o ponto em que a pronúncia esteja correta.

$scope.recordMyVoice = function(){
var recognition = new SpeechRecognition() || new webkitSpeechRecognition();// To Device
recognition.lang = 'en-US';
recognition.start();
recognition.onresult = function(event) {
$scope.showAnswer = true;
if (event.results.length > 0) {
$scope.showAnswer = true;
$scope.recognizedText = event.results[0][0].transcript;
$scope.$apply()
}
};
recognition.onerror = function(event) {
TTS.speak({
text: "Sorry, could you please repeat?",
locale: 'en-US',
rate: 1.00
}
}
}

No tocante a privacidade, o uso do microfone deve ser permitido pelo usuário. Como o app foi construído para ser utilizado nas plataformas Android e iOS, foi necessário tratar as permissões de forma diferenciada.

Diferente do Android em que não é necessária configuração adicional, no iOS é obrigatório passar uma string no parâmetro MICROPHONE_USAGE_DESCRIPTION informando o motivo pelo qual você deseja esta permissão do usuário.

O app está publicado no Google Play e App Store e é restrito aos alunos.

Eu realmente recomendo o uso da Web Speech API, é de simples utilização e pode ser utilizado como um diferencial de competitividade e acessibilidade.

Referências

Cordova Plugin TTS

Web Speech API

Permissão iOS para microfone

Ionic Framework

--

--