Speech Recognition (SOLVED)

ionic-v1
1

Hello!

I has a problem with Speech Recognition in my ionic app.

I use webkitSpeechRecognition and it’s work fine using chrome in the computer with ionic server but, when I build the android app and I try it in my Nexus 5, I obtain the next error: ReferenceError: webkitSpeechRecognition is not defined

It is possible use webkitSpeechRecognition with ionic apps?

If not, there is another way to implement Speech Recognition in android and iOS ionic apps?

Thanks!
Javi.

1 Like
2

Hi,

You need to use cordova plugin for that. there are couple of them open sourced. you can do some search…

Here’s one i found…

4

Sorry!

I modified the code changing:
var recognition = new SpeechRecognition(); => var recognition = new webkitSpeechRecognition();

Then, it’s works in computer.

Using: var recognition = new SpeechRecognition(); It works in mobile.

Thanks a lot!

1 Like
5

can you share how to use this sir ? :smile:

6

@losewin,
First, install the plugin: cordova plugin add https://github.com/macdonst/SpeechRecognitionPlugin

Then, you can use in the controller:

$scope.recognizedText = "";
    
$scope.record = function() {
    //var recognition = new webkitSpeechRecognition(); //To Computer
    var recognition = new SpeechRecognition(); // To Device
    recognition.lang = 'es-ES';
    
    recognition.onresult = function(event) {
        if (event.results.length > 0) {
            $scope.recognizedText = event.results[0][0].transcript;
            $scope.$apply();
        }
    };
    
    recognition.start();
};

And index.hml

<input type="text" id="entrada" value="{{ recognizedText }}"><BR>
<button class="button" id="boton" ng-click="record()">Start</button>
2 Likes
7

Thanks alot for sharing :smile:

9

after I install the plugin in cordova, what I must do to use this plugin? where the controller is? I’m brand new in cordova, can you give me the tutorial from the start again? because I want to build app with speech recognition too, thanks for your help

10

have you ever try that plug in? I tried that but there is no result, can you help me?

11

You can start with this: https://ccoenraets.github.io/ionic-tutorial/

12

I too tried but dosen’t seem to work.I have posted in Stackoverflow…

13

what about with ionic 2?

1 Like
14

@arsene123 checkout this question http://stackoverflow.com/questions/38571063/voice-recognition-speech-to-text-stt-plugin

15

i try this but my app stop working

16

Another alternative if you want to implement Web Speech Recognition quickly and without headache in your ionic app, is to use ng-speech-recognition directive: https://github.com/Devniz/ng-speech-recognition

17

i’m working with ionic 2

18

In my app (Ionic 2 >= RC2, android) this works:

Plugin: org.apache.cordova.speech.speechrecognition

after import:
declare var SpeechRecognition: any;

speechToText() {
    this.platform.ready().then(() => {
      this.recognition = new SpeechRecognition();
      this.recognition.lang = 'it-IT';
      this.recognition.onnomatch = (event => {
        this.showAlert('No match found.');
      });
      this.recognition.onerror = (event => {
        this.showAlert('Error happens.');
      });
      this.recognition.onresult = (event => {
        if (event.results.length > 0) {
          this.loadWords(event.results[0][0].transcript);
        }
      });
      this.recognition.start();
    });

 }

loadWords(dati: string) {
    // bla bla bla
}

I hope it helps.

1 Like
19

let me time try it, great thanks

20

Hello! I cant install plugin: org.apache.cordova.speech.speechrecognition (Error: Registry returned 404 for GET on https://registry.npmjs.org/org.apache.cordova.speech.speechrecognition)
so… I have installed this one: cordova plugin add GitHub - macdonst/SpeechRecognitionPlugin: W3C Web Speech API - Speech Recognition plugin for PhoneGap
and like the example, my code is:

import { Component } from ‘@angular/core’;

import { NavController, Platform } from ‘ionic-angular’;

declare var SpeechRecognition: any;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

constructor(public navCtrl: NavController, public platform: Platform) {

}

speechToText() {
this.platform.ready().then(() => {
this.recognition = new SpeechRecognition();
this.recognition.lang = ‘it-IT’;
this.recognition.onnomatch = (event => {
this.showAlert(‘No match found.’);
});
this.recognition.onerror = (event => {
this.showAlert(‘Error happens.’);
});
this.recognition.onresult = (event => {
if (event.results.length > 0) {
this.loadWords(event.results[0][0].transcript);
}
});
this.recognition.start();
});
}

loadWords(dati: string) {
// bla bla bla
}

}

But I have this message: "Property ‘recognition’ does not exist on type ‘HomePage’.
Somebody know how can I solve it?
Thanks in advance!

21

Jose, the command actually is cordova plugin add GitHub - macdonst/SpeechRecognitionPlugin: W3C Web Speech API - Speech Recognition plugin for PhoneGap and it install the org.apache.cordova.speech.speechrecognition as you can see in plugin directory of the project, didn’t you?

Add recognition as var:

you have :
export class HomePage {

constructor(public navCtrl: NavController, public platform: Platform) {

}

speechToText() {
this.platform.ready().then(() => {
this.recognition = new SpeechRecognition();
this.recognition.lang = 'it-IT';

insert:

export class HomePage {

recognition;

constructor(public navCtrl: NavController, public platform: Platform) { }

speechToText() {
    this.platform.ready().then(() => {
    this.recognition = new SpeechRecognition();

So you declare recognition as property. I’m sorry, many times we omit some basics…
BTW, I think you have to change this.recognition.lang= “it-IT” with “es-ES” or the exact language you is speaking and the country acronym (example it-CH for italian language in Switzerland).

I had some problem after upgrade from RC2 to RC4. If I compile with RC2 it run, but with RC4 I got, in console, the run time error:

EXCEPTION: Uncaught (in promise): ReferenceError: SpeechRecognition is not defined

I haven’t fixed it yet. I post the help request here.

P.

22

Thanks for reply me pimol, now my code is like this:

import { Component } from ‘@angular/core’;

import { NavController, Platform } from ‘ionic-angular’;

declare var SpeechRecognition: any;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

recognition: any;

constructor(public navCtrl: NavController, public platform: Platform) {

}

speechToText() {
this.platform.ready().then(() => {
this.recognition = new SpeechRecognition();
this.recognition.lang = ‘it-IT’;
this.recognition.onnomatch = (event => {
//this.showAlert(‘No match found.’);
});
this.recognition.onerror = (event => {
//this.showAlert(‘Error happens.’);
});
this.recognition.onresult = (event => {
if (event.results.length > 0) {
this.loadWords(event.results[0][0].transcript);
}
});
this.recognition.start();
});
}

loadWords(dati: string) {
// bla bla bla
}

}

and I have this line in my android.json after execute the new command:

    "org.apache.cordova.speech.speechrecognition": {
        "PACKAGE_NAME": "com.ionicframework.speed802926"
    }

Problem now is: “EXCEPTION: Uncaught (in promise): ReferenceError: SpeechRecognition is not defined”
You know why?