CODEWITHSUNDEEP
javascriptcordovacordova-pluginsvisual-studio-cordova
webbuilder
webbuilder

Reputation: 173

Speech recognition plugin not working in Cordova 6

I am using Visual studio tools for Apache Cordova to develop Android app. I started new project and added speech recognition plugin using GIT url.

https://github.com/macdonst/SpeechRecognitionPlugin

It installed successfully and project build is also successful. When I run application, In below code, It shows one alert before Speech recognition plugin initialization and never reaches second alert after that in below code.

function onDeviceReady() {
        // Handle the Cordova pause and resume events
        alert('test');
        recognition = new SpeechRecognition();
        alert('test 2');
        recognition.onresult = function (event) {
            if (event.results.length > 0) {
                alert(event.results[0][0].transcript);
                q.value = event.results[0][0].transcript;
                //q.form.submit();
            }
        }
        alert('test 2');
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        var element = document.getElementById("deviceready");
        element.innerHTML = 'Device Ready';
        element.className += ' ready';
    };

please help, am i missing something here while adding plug-in?

Upvotes: 0

Views: 901

Answers (1)

Gandhi
Gandhi

Reputation: 11935

Was stuck with the same issue for a longtime. 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();
    });
}

Upvotes: 0

Related Questions