Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic app not recognizing speech in android mobile

I wanted to design an ionic app that listens to voice commands by following the tutorial here But the app seems to recognize the voice commands over the microphone if tested on my computer using the var recognition = new webkitSpeechRecognition(); //To Computer command.But on seeing this post I replaced the command to

var recognition = new SpeechRecognition(); // To Device

But this dosen't seem to work on my android device.. Has anybody faced the same issue with SpeechRecognitionPlugin ? Please share your thoughts and reviews...Thanks

like image 921
forgottofly Avatar asked Jun 29 '26 23:06

forgottofly


2 Answers

The timeout workaround isn't working for me. However, I did notice that I get almost 100% results if I speak IMMEDIATELY after the beep. I added a prompt to the user if no words are found.

Here is an example based on my approach:

var recording = false;
var spokenInput = '';

function startRecognition() {
    if (!recording) {

        recording = true;
        spokenInput = '';

        var recognition = new SpeechRecognition();

        recognition.onresult = function(event) {
            if (event.results.length > 0) {
                spokenInput = event.results[0][0].transcript;
            }
        };

        recognition.onend = function() {
            recording = false;
            if (spokenInput) {
               alert(spokenInput);
            } else {
                alert('For best results, try speaking immediately after the beep!');
            }
        };

        setTimeout(function() {
            recognition.stop();
        }, 6000); // Force stop  after 6 seconds

        recognition.start();

    }
}
like image 152
lincolnberryiii Avatar answered Jul 02 '26 12:07

lincolnberryiii


Finally able to crack it. The trick was to add the cordova media plugin.

The working code is as follows:

index.html

<!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>Speech Recognition</title>
    </head>
    <body>      
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <form>
        Click to speak <input type="button" value="speak" name="Download" id="speak" />  <br>
        <input type="text" id="q" name="q" size=60>
        </form>

        <script type="text/javascript" src="js/jquery.js"></script> 
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

app.js

$(document).ready(function() {
    document.addEventListener("deviceready", onDeviceReady, false);
});

var recognition;
function onDeviceReady() {  

    $('#speak').click( function() {
        recognition = new SpeechRecognition();          
        recognition.onresult = function(event) {
            if (event.results.length > 0) {
                console.log(event.results[0][0].transcript);                
                q.value = event.results[0][0].transcript;
            }
        };      
        recognition.start();
    });
}
like image 33
Gandhi Avatar answered Jul 02 '26 13:07

Gandhi