Cordova reconhecimento de voz Speech recognition

Para quem precisa fazer um app com reconhecimento de voz, uma opção muito prática é o plugin cordova speech recognition.

Vamos usar como base o projeto criado Nesse post e logo em seguida navegar pelo prompt até a pasta do projeto. 

Depois executar esse comando para instalar o plugin:

 cordova plugin add cordova-plugin-speechrecognition

Feito isso, agora vamos adicionar dois botões. Um para iniciar o reconhecimento de voz e outro para parar de escutar.

Esse de parar só é necessário para IOS.  Para Android, quando você parar de falar ele para de escutar automaticamente.

Adicionei também a versão mais recente do JQuery. O código do arquivo index.html deve ficar assim:

 <!DOCTYPE html>
 
 <html>
     <head>
         <meta name="format-detection" content="telephone=no">
         <meta name="msapplication-tap-highlight" content="no">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
         <link rel="stylesheet" type="text/css" href="css/index.css">
         <title>Hello World</title>
     </head>
     <body>
         <div class="app">
             <h1>Apache Cordova</h1>
             <p>
                 teste
                 <button onclick="app.vai();">vai</button>
                 <button onclick="app.stop();">Para</button>
             </p>
             <p id="texto">
                 vai
             </p>
         </div>
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
     </body>
 </html>
 

OBS: Não esqueça de fazer o download do arquivo jquery-3.3.1.min.js e copiá-lo para a pasta www/js do projeto.

Agora no index.js vamos implementar os métodos chamados pelos botões. 

No método onDeviceReady vamos verificar se o app tem permissão para usar o microfone. 

Se não tiver, vamo chamar o método do plugin para pedir a permissão. Usei uma variável para armazenar o resultado de permissão. 

Dessa forma, antes de iniciar o reconhecimento de voz, consigo verificar se foi concedida a permissão para usar o microfone. 

Esse tratamento não é obrigatório, pois se método speechRecognition.startListening for chamado sem a permissão consedida, o método de erro é chamado com a mensagem informando que não há permissão. Então o código do arquivo index.js deve ficar assim:

 var app = {
     temPermissao: true,
     // Application Constructor
     initialize: function() {
         document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
         
     },
 
     // deviceready Event Handler
     //
     // Bind any cordova events here. Common events are:
     // 'pause', 'resume', etc.
     onDeviceReady: function() {
         var self = this;
         window.plugins.speechRecognition.hasPermission(
                 function(temPermissao){
                     if(!temPermissao){
                         window.plugins.speechRecognition.requestPermission(
                                 function(deuPermissao){
                                        self.temPermissao = true;
                                        alert("deu rock!"+deuPermissao);
                                 },
                                 function(erro){
                                     self.temPermissao = false;
                                     alert("erro na permissao"+erro);
                                 });
                     }
                 },
                 function(error){
                     alert("erro");
                     alert(error);
                 }
                 );
         
         
     },
     stop: function(){
         window.plugins.speechRecognition.stopListening(
                 function(){
                     alert("parou");
                 },
                 function(){
                     alert("erro");
                 });
     },
     vai: function(){
         var self = this;
         
         if(!self.temPermissao){
             alert("Sem permissão para usar o microfone ");
             
             return false;
         }
         
         var options = {
             language: "pt-BR",
             showPartial: true,
             showPopup: false
           };
 
           window.plugins.speechRecognition.startListening(
                   function(dados){
                       $.each(dados,function(key,texto){
                           $("#texto").html("").append(texto);
                       });
                  },
                  function(erro){
                      alert("erro: "+erro);
                  },options);
     },
     isAbaliable: function(){
         window.plugins.speechRecognition.isRecognitionAvailable(
                 function(data){
                     alert("sucesso!");
                     alert(data);
                 },
                 function (error){
                     alert("erro!");
                     alert(error);
                 }
                 );
     }
 };
 
 app.initialize();

Se tudo estiver ok. Execute o comando 

 cordova run android

e o resultado deve ser esse:

Imagem

Segue a documentação completa

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente