Adding Text to Speech in Ionic/Angular Application

Ionic text-to-speech tutorial: In this detailed guide, you'll learn how to make a simple feature that turns text into speech in an Ionic or Angular app by using the Ionic native text-to-speech plugin or the Cordova text-to-speech plugin.

The text Speech plugin helps the ionic app add text-to-speech features. You can use Ionic Native & Cordova are used to add this plugin. It works on major operating systems like Android, iOS, and Windows.

Text-to-speech, or TTS, is a technology overgrowing and is very useful for making the user experience better and turning text into speech.

This tutorial will help you how to add a text-to-speech feature to an ionic or angular app step by step using a TTS plugin. So, let's get started.

Set up the Ionic App

Open the console, type the command, and run the base on top of that to install Ionic CLI:

npm install -g @ionic/cli

Bash

Installing a new ionic or angular app is now possible:

ionic start ionic-speech blank --type=angular

Bash

To get into the app, use the command:

cd ionic-speech

Bash

Add a Text-to-Speech plugin in Ionic

In this step, you need to type and run both commands to install the Cordova-plugin-TTS and ionic native text-to-speech plugins.

Add a Text-to-Speech plugin in Ionic.

In this step, you need to type and run both commands to install the Cordova-plugin-TTS and ionic native text-to-speech plugins.

ionic cordova plugin add cordova-plugin-tts

npm install @ionic-native/text-to-speech

Bash

Register Text-to-Speech Plugin in App Module

Go to the main app module class, import, and register the TextToSpeech module in the AppModule class. Then, add & change the below code in the 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 { 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: [
    TextToSpeech,
    { 
        provide: RouteReuseStrategy, 
        useClass: IonicRouteStrategy 
    }
  ],
  bootstrap: [AppComponent],
})

export class AppModule {}

TypeScript

Integrate Text to Speech Plugin in Ionic

TextToSpeech should eventually let you use the speak() method. In that method, you can pass text in string format and set the text, locale, and rate properties.

Update home.page.ts file:

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 {

  ttsText = [];

  constructor(private tts: TextToSpeech) {
    this.ttsText = [
      "Even so, the sun came up early one morning.",
      "With all the glory of victory on my head",
      "But, alas, he was only gone for an hour.",
      "Now, the region's cloud has hidden him from me."
    ]
  }

  readTextToSpeech(text) {
      this.tts.speak({
        text: text,
        locale: 'en-GB',
        rate: 0.77
    })
    .then((res) => 
      console.log(res)
    )
    .catch((error) => 
      alert(error)
    );
  }

}

TypeScript

Let's use ion-item-sliding, which makes it easy to list items with important information. We should also add a button that will read the text out loud.

Update home.page.html file:

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

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

Markup

App Run or Test

At some point, you may add a device and make a build that can be run so that the text-to-speech ionic app can be used on the simulator or an actual device.

To add a device, run the command:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Bash

Run command to make a build that can be run:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Bash

Lastly, to start the app, type the run command:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Bash

Conclusion

We have carefully followed every step to convert text to speech in Ionic using ionic native & Cordova packages. If you have any questions, comment below.