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:
- Create an app called text2speechApp
- Install the
Cordova and Ionic Native plugin - Import Plugin in Module
- Create user interface in home.html
- Write method to read text
- Test your app on a device (real or virtual)
Having learnt all you need to do, let get started!!
- 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
- Import TextToSpeech from @ionic-native/text-to-speech’
- 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
- Import TextToSpeech from @ionic-native/text-to-speech’
- Add private tts: TextToSpeech to the constructor
- 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.