Ionic text to speech tutorial; Throughout this comprehensive guide, you will find out how to easily create a simple feature in which you will convert text to speech in the ionic, angular application using Ionic native and Cordova text to speech plugin.

Text to Speech plugin helps add text to speech functionality in the ionic app. This plugin is added using ionic native and Cordova. It is supported by major platforms such as Android, iOS, and Windows.

TTS or text to speech is a rapidly growing technology that is highly useful in elevating user experience in conjunction with aiding to convert text into speech.

This tutorial helps you ascertain step by step implement text to speech feature into the ionic, angular app using a tts plugin; therefore, let’s get started.

Install Ionic App

Open console, type command on top of that execute command to install Ionic CLI:

npm install -g @ionic/cli

Now, you can Install a new ionic, angular app:

ionic start ionic-app-demo blank --type=angular

Use command to get inside the app:

cd ionic-app-demo

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Add Text-to-Speech Plugin in Ionic

In this step, you need to type and execute both the given commands and evoke the installation of cordova-plugin-tts likewise the ionic native text-to-speech plugin.

ionic cordova plugin add cordova-plugin-tts

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

Register Text-to-Speech Plugin in App Module

Head over to main app module class, import and register TextToSpeech module in AppModule class, consequently add and update below code in 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 {}

Integrate Text to Speech in Ionic

Ideally, TextToSpeech eventually allows accessing speak() method; within the method, we can pass text in string format also set text, locale, 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 = [
      "You miss 100% of the shots you don't take",
      "Whether you think you can or you think you can't, you're right",
      "I have learned over the years that when one's mind is made up, this diminishes fear.",
      "I alone cannot change the world, but I can cast a stone across the water to create many ripples."
    ]
  }

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

}

Let us use ion-item-sliding, which helps you reveal a list item which holds essential information, moreover add the button which will read the text to speech.

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>

Run or Test App

Eventually, you may add a device and create a runnable build to invoke the text to speech ionic app on the simulator or real device.

Run command to add device:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Execute command to create a runnable build:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Lastly, run command to start the app:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Conclusion

We have profoundly followed every instruction to convert text to speech in Ionic using ionic native and Cordova packages.