How to create a Text-To-Speech Android app using Cordova & Native Plugin ?

3 min readOct 22, 2020

In this article, we’ll talk about how to create an app that turns your text into speech

ِCreate a new ionic 4 application

Hello, developers, we first start creating a new project :

# Create new application
$ ionic start TextToSpeechIonic blank

# Change to app root directory
$ cd TextToSpeechIonic

# Open project in VS code

Note: We will use Angular as the framework

Install Text To Speech Cordova

Now that we have created a new project, we will install plugin of Text To Speech :

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

Import plugin in module

After installing the plugin, now open the app.module.ts file to import then add the plugin in providers :

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    TextToSpeech,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Add Text To Speech in component

Let’s use plugin functionality in the home component which is created by default in the blank template. Import TextToSpeech then add in the class constructor, after that we will call speak method taking.

We have a function called listen () where the variable comes from a text box :

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 {textTest: string;constructor( private tts: TextToSpeech) {}Listen(){
this.tts.speak(this.textTest).then(() => console.log("succes")).catch((reason: any) => console.log(reason));
}
}

In the home.page.html file, we will have a text box associated with the textTest variable and a “Listen” button to hear the text you wrote :

<ion-header [translucent]="true">
    <ion-toolbar color="tertiary">
      <ion-title>
        Text To Speach
      </ion-title>
    </ion-toolbar>
</ion-header><ion-content [fullscreen]="true" >
  <br><br>
   <input type="text" [(ngModel)]="textTest" >
  <br><br>
   <input type="submit" value="Listen" (click)="Listen()">
</ion-content>

That’s you can now run an app in real device to test Text To Speech function

Option

There are some important option available use as follows :

this.tts.speak({
            text: "Hello world my name is Dhia",
            locale: 'en-GB',
            rate: 0.75
        })
        .then(() => console.log('Success'))
        .catch((reason: any) => console.log(reason));

Now let’s know some things :

locale : For specific language option

rate : From 0 → 1 change the pace of speaking the text