In this tutorial, we are going to learn how to convert text
to speech in ionic 4 application, to achieve this we need to take the following
steps:

1. Create an app called text2speechApp
2. Install the
   Cordova and Ionic Native plugin
3. Import Plugin in Module
4. Create user interface in home.html
5. Write method to read text
6. Test your app on a device (real or virtual)

Having learnt all you need to do, let get started!!

1. Create an app called text2speechApp

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

Ionic start text2speechApp 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.
text2speechApp

And run your app with the following command

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

ionic cordova plugin add cordova-plugin-tts
npm install --save @ionic-native/text-to-speech@4

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 TextToSpeech from @ionic-native/text-to-speech’
2. Add TextToSpeech to Provider section

As shown below

 

 

4.    Create user interface in home.html

Open home.page.html and change the content of tag to the following

5.  Write method to read text

Open home.page.ts and do the following

1. Import TextToSpeech from @ionic-native/text-to-speech’
2. Add  private tts: TextToSpeech to the constructor
3. Declare a
   variable called ttspeech and assign it blank as shown below

  ttspeech="";

4. Write method to read Text as follows

readText(){
  this.tts.speak(this.ttspeech)
  .then(() => console.log('Success'))
  .catch((reason: any) => console.log(reason));
  }

At the end, the home.page.ts will look like the code below

import { Component } from '@angular/core';
import { TextToSpeech } from '@ionic-native/text-to-speech/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  ttspeech="";

  constructor(public tts: TextToSpeech) {}

  readText(){
  this.tts.speak(this.ttspeech)
  .then(() => console.log('Success'))
  .catch((reason: any) => console.log(reason));
  }

}

We are through with the coding, now let test our app.

6.    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.