Ionic 5 Text to Speech: How to Convert Text to Speech in Ionic Application using Ionic Native and Cordova Plugins

Last updated on by Digamber

This Ionic 5 & Angular step by step tutorial explains how to convert text to speech in Ionic 5 application using Ionic Native and Cordova plugins.

In this tutorial, we learn how to convert digital text into speech using the TextToSpeech package made available by Ionic Native and Cordova. Text-to-speech (TTS) is a profound and exorbitantly helpful assistive technology to reads digital text.

Modern applications widely use text to Speech technology to spruce up the user experience; it can help you in many ways:

  • Cognize word recognition.
  • It focuses on comprehension rather than sounding out words.
  • Reduces the stress of reading, concurrently elevates the ability to pay attention and remembering vital information.

Not just that, Text-to-speech is also a boon for those who have visual and reading wastrel.

What you will learn throughout this tutorial:

  • Create a new Ionic application.
  • Install and Configure Text to Speech plugin.
  • Add Text to Speech in an Ionic application.
  • Convert text in a female voice in the Ionic project.

Let’s start implementing text to speech in ionic using the native plugin

Setting Up Ionic Environment

The First step for converting text to speech begins with installing Ionic CLI; ignore this step if already installed.

npm install -g @ionic/cli

Execute the command to create a brand new ionic project.

ionic start ionic-texttospeech-example blank --type=angular

Move to the project root:

cd ionic-texttospeech-example

Install Text to Speech Plugin

You need to run both the commands simultaneously to install the Text to Speech plugin.

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

In the next step, we need to import and register the TextToSpeech plugin in Ionic’s main app.module.ts file.

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,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    TextToSpeech
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

Implement Text to Speech in Ionic

Go to the app folder and open the home.page.ts file; replace the code with the below code.

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 {

  Text = [];

  constructor(
    private textToSpeech: TextToSpeech
  ) {
    this.Text = [
      "Things are going well so far",
      "That's the last straw",
      "The best of both worlds",
      "The person we were just talking about showed up!"      
    ]
  }


  convertTextToSpeech(text) {
    this.textToSpeech.speak(text)
      .then(
        () => console.log('Done')
      )
      .catch((reason: any) => console.log(reason));
  }

}

You have to import TextToSpeech service from ‘@ionic-native/text-to-speech/ngx’ at the top of the component.

Inject TextToSpeech service in constructor object.

Define a Text array; you can add as many as text para.

The convertTextToSpeech() method takes the text argument, access the speak() method, and pass the text, which needs to be converted to speech.

Add the following code in home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Text to Speech Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item-sliding *ngFor="let text of Text">
      <ion-item>
        <ion-label text-wrap>{{text}}</ion-label>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option (click)="convertTextToSpeech(text)"><ion-icon name="mic-outline"></ion-icon></ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

The sliding panel of ionic bound with *ngFor loop and iterating every text para can slide towards the right and click on the mic icon to listen to your text.

Setting Up Text to Speech

Additionally, you can adjust the text to speech with some of the properties that allow you to add a particular language and handle the speech’s pace via rate prop.

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 {

  Text = [];

  constructor(private textToSpeech: TextToSpeech) {
    this.Text = [
      "Things are going well so far",
      "That's the last straw",
      "The best of both worlds",
      "The person we were just talking about showed up!"      
    ]
  }

  convertTextToSpeech(text) {
      this.textToSpeech.speak({
        text: text,
        locale: 'en-GB',
        rate: 0.75
    })
    .then(() => 
      console.log('Done')
    )
    .catch((reason: any) => 
      console.log(reason)
    );
  }

}

Test Application

In general, testing should be done in a real device; however, we are testing it regardless of the local environment.

ionic cordova platform add ios
ionic cordova platform add android

Run the command based on your preference:

# iOS
ionic cordova run ios

# Android
ionic cordova run android

Convert Text to Speech in Ionic Application

Summary

we have seen how easy it is to integrate text to speech in the Ionic application. However, we have seen just the tip of the iceberg; you can customize it in many ways as per your requirement, i hope you liked it.