How to Convert Text to Speech in Ionic 7 Angular App

Last Updated on by in Ionic

This Ionic Angular step by step tutorial explains how to convert text to speech in Ionic 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.

sudo 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

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,

Install Text to Speech Plugin

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

npm i cordova-plugin-tts --legacy-peer-deps
npm install @ionic-native/text-to-speech --legacy-peer-deps

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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
  bootstrap: [AppComponent],

export class AppModule {}

Implement Text to Speech in Ionic

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

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

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],

export class HomePage {
  Text: any = [];

  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: any) {
      .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 file:

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

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

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';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],

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) {
        text: text,
        locale: 'en-GB',
        rate: 0.75
    .then(() => 
    .catch((reason: any) => 


Test Application

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

Run command to add platform:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Execute following command to build app:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Start the app in the device.

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Convert Text to Speech in Ionic Application


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.