Create your account

Already have an account? Login here

Create account

Using Ionic Cordova's Speech Recognition Plugin (Tutorial)

By Gary simon - Aug 04, 2017

At times, you may find yourself in need of capturing a user's voice. The Cordova Speech Recongnition plugin makes this process a breeze.

The plugin works by recording a user's voice and returning an array of matches, with which you can do any number of things.

We're going to create a simple app that will allow the user to control the background color of the app through voice alone. While this simple example isn't really practical, it's going to illustrate how you can capture a user voice and then do something logical with it.

So, let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome videos!

Starting the Project

First, make sure you have the Ionic CLI installed by running:

$ npm install -g ionic@latest

Once finished, we'll use it to start a simple project with the blank template:

$ ionic start speech blank
$ cd speech

Great, next we'll install the plugin once you've hopped into the project folder.

Installing the Speech Recognition Plugin

In the new speech project folder, let's run 2 commands:

$ ionic cordova plugin add cordova-plugin-speechrecognition
$ npm install --save @ionic-native/speech-recognition

As with all other Ionic Native Plugins, we'll need to add this to our app's module file. So, open up the new speech folder in your code editor (I use Visual Studio Code) and head over to /src/app/app.module.ts and add:

// Other imports removed for brevity

import { SpeechRecognition } from '@ionic-native/speech-recognition';

@NgModule({

  // Other properties removed for brevity

  providers: [
    StatusBar,
    SplashScreen,

    SpeechRecognition, // <- Right here

    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Great! Now we're ready to use the speech recognition plugin.

Building our Speech App

Head over to the /src/pages/home.ts file and import the speech recognition as we did in the app.module.ts file above:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SpeechRecognition } from '@ionic-native/speech-recognition';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  bgcolor: string = 'white';

  constructor(public navCtrl: NavController, private speechRecognition: SpeechRecognition) {

  }

}

First, we're adding a bgcolor property, setting it to white by default. This will be the background color of our app.

Notice that we also created an instance of it speechRecognition in the constructor through dependency injection.

Checking for Speech Recognition Permissions

The first thing we'll have our app do is check whether or not this app has been given permission to access speech. We'll use the ngOnInit() lifecycle hook to place in our code. This runs when the app is loaded.

Underneath the constructor(...) add:

  ngOnInit() {

    this.speechRecognition.hasPermission()
      .then((hasPermission: boolean) => {

        if (!hasPermission) {
        this.speechRecognition.requestPermission()
          .then(
            () => console.log('Granted'),
            () => console.log('Denied')
          )
        }

     });

  }

Once the app loads, if the don't have permission (!hasPermission), then we run .requestPermission().

Simple enough!

Start Listening

We'll create a method called start(), which will be called when a user clicks on a button in our template. Inside of start, we'll call a .startListening() method, and set a property to the first item in the returned array.

  start() {

        this.speechRecognition.startListening()
          .subscribe(
            (matches: Array<string>) => {
              this.bgcolor = matches[0];
            },
            (onerror) => console.log('error:', onerror)
          )

  }

matches is a returned array based on the list of possible matches based on how the speech recognition interprets what the user said. 

A returned result might look something like:

  • My name is Jeffrey Bongus
  • My name is Jefrey Bongus
  • My name is Jeffrey Bongis
  • My name is Jefrey Bongis
    ...you get the point.

Because the purpose of our app is straight forward and we're only looking for a 1 word response, it's safe to grab the first match.

Note: You can pass in options with the .startListening(options) method, where you can specify the number of possible matches, language, etc.., but we're not going to do that here.

Creating the Template

Visit the /src/pages/home/home.html file and paste this:

<ion-content padding [style.background-color]="bgcolor">
  <button ion-button (click)="start()">Say a color</button>
</ion-content>

We're using Angular style binding to set the background-color to our bgcolor property, and then using click event binding to call the start() method.

Simple, huh? Yeah, I felt like making this straight-forward.

Running the App

Being that this app relies on a native plugin, we can't serve it to the browser for testing. You can either use the Ionic View app, or connect your phone via USB and use the CLI to run the app on your device.

If you followed all of the steps, your result should work based on the video shown above.

Enjoy!

 

 


Share this post

Chat with us




Say something about this awesome post!