67, Obafemi Awolowo way, Ikeja Lagos +234 802 302 0838 info@ionicdon.com
Ionic 4 speech to text / speech recognition App tutorial

Ionic 4 speech to text / speech recognition App tutorial




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

  1. Create an app called speechRecognitionApp
  2. Install the Cordova and Ionic Native plugin
  3. Import Plugin in Module
  4. Create user interface in home.html
  5. Write method to listen to speech
  6. 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

  1. Create an app called speechRecognitionApp

Open your Command Line Interface (CLI) and type the following code

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

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




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

  1. import { SpeechRecognition } from @ionic-native/speech-recognition/ngx;
  2. 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:

  1. Get permission
  2. Start listening action
  3. 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




5. Write method to get check and request permission

Open home.page.ts and enter the following code

6. Write method to listen to speech

While the home.page.ts is still open, enter the following code

7. Write method to stop listening to voice

While the home.page.ts is still open, enter the following code




After all, your home.page.ts will look like the following




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

Leave a Reply

Close Menu