In this tutorial, we are going to learn how to implement speech to text or speech recognition in ionic 4 app. To complete our today’s task, we need to do the following steps
- Create an app called speechRecognitionApp
- Install the Cordova and Ionic Native plugin
- Import Plugin in Module
- Create user interface in home.html
- Write method to listen to speech
- Test your app on a device (real or virtual)
As you can see, we have some coding to do, and no time!! So let get started
- Create an app called speechRecognitionApp
Open your Command Line Interface (CLI) and type the following code
|
1 |
Ionic start speechRecognitionApp blank |
When asked to select JavaScript framework, select angular as shown below and press enter key
When done, change directory to the newly created app i.e. speechRecognitionApp
And run your app with the following command
|
1 |
Ionic serve --l |
Do you have what I have below?
GREAT!!!
Now let’s move on.
2. Install the Cordova and Ionic Native plugin
While you are still in our app directory issue the following command to install Cordova and Native wrapper for plugin as shown below
|
1 2 |
ionic cordova plugin add cordova-plugin-speechrecognition npm install @ionic-native/speech-recognition |
3. Import Plugin in Module
Open your favourite code editor, in my own case, I use VSCode.
Now, open app.modules.ts under src/app/ and do the following
- import { SpeechRecognition } from @ionic-native/speech-recognition/ngx;
- Add SpeechRecognition to provider section
As shown below
4. Create user interface in home.html
Open home.page.html, create three buttons for the following tasks:
- Get permission
- Start listening action
- Stop listening action
And
4. include an ion card to display the text result of the voice listening.
By changing the content of <ion-content> </ion-content> tag to the following
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ion-content> <ion-button color="primary" size="full" (click)= "checkPermission()"> Get Permission</ion-button> <ion-button color="primary" size="full" (click)= "startListening()"> Start Listening</ion-button> <ion-button color="primary" size="full" (click)= "stopListening()"> Stop Listening</ion-button> <ion-card> <ion-card-title>What I heard....</ion-card-title> <ion-card-content> <ion-list> <ion-item *ngFor="let match of matches"> {{match}} </ion-item> </ion-list> </ion-card-content> </ion-card> </ion-content> |
5. Write method to get check and request permission
Open home.page.ts and enter the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
checkPermission(){ this.speechRecognition.hasPermission().then((permission)=>{ if(permission){ alert("Already has permission for speech recognition") } else{ alert("Not permission yet") } }, (err)=>{ alert(JSON.stringify(err)) }) } requestPermission(){ this.speechRecognition.requestPermission().then((data)=>{ alert(JSON.stringify(data)) }, (err)=>{ alert(JSON.stringify(err)) }) } |
6. Write method to listen to speech
While the home.page.ts is still open, enter the following code
|
1 2 3 4 5 6 7 8 |
startListening(){ this.speechRecognition.startListening().subscribe((speeches)=>{ this.matches=speeches },(err)=>{ alert(JSON.stringify(err)) }) } |
7. Write method to stop listening to voice
While the home.page.ts is still open, enter the following code
|
1 2 3 4 |
stopListening(){ this.speechRecognition.stopListening() } |
After all, your home.page.ts will look like the following
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import { Component } from '@angular/core'; import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { public matches=[]; constructor(public speechRecognition: SpeechRecognition) {} checkPermission(){ this.speechRecognition.hasPermission().then((permission)=>{ if(permission){ alert("Already has permission for speech recognition") } else{ alert("Not permission yet") } }, (err)=>{ alert(JSON.stringify(err)) }) } requestPermission(){ this.speechRecognition.requestPermission().then((data)=>{ alert(JSON.stringify(data)) }, (err)=>{ alert(JSON.stringify(err)) }) } startListening(){ this.speechRecognition.startListening().subscribe((speeches)=>{ this.matches=speeches },(err)=>{ alert(JSON.stringify(err)) }) } stopListening(){ this.speechRecognition.stopListening() } } |
Congratulations, We are done. Let us now test our app on a device
8. Test your app on a device (real or virtual)
This app does not run on browser, you need to connect and test on a physical device or on a virtual device.
for more information on how to run ionic app on android emulator, follow the link
