How to convert text to speech in Ionic 3

Getting started
Creating a New Ionic Application
Install the Text-To-Speech plugin
Configure
Update UI
Summary

Getting started

To follow this tutorial you should have the basic fundamentals of the command line and Ionic. All the following was done using Ionic v.3.19.0

1. Creating a New Ionic Application

Let’s create a simple Ionic app using the following command:

ionic start ionic-tts blank

After finishing, you need to open the project directory:

cd ionic-tts

2. Install the Text-To-Speech plugin

To make this app “speaking”, we need to install Cordova and Ionic plugins:

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

After installation, we should set up this plugin into our app.

Our src/app.module.ts should look like this:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    TextToSpeech
  ]
})
export class AppModule {}

3. Configure

The current text-to-speech library has two instance members: speak and stop. Speak method uses to speak text. According to plugin documentation, it supports 3 properties:

text - text to be pronounced
local - a string like en-US, ru-Ru. For example, you can’t say Russian text using English locale
rate - speed rate of pronouncing. It can be equal to 1 and more.

In this tutorial, we will try to use all of these params. Just needs to implement all initial params and create separate method, which will speak the text. It’s will be the method playText()

Our src/pages/home/home.ts should look like this:

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  text: string;
  rate: number;
  locale: string;

  constructor(private tts: TextToSpeech) {
    this.text = 'Initial text';
    this.rate = 1;
    this.locale = 'en-US';
  }

  playText() {
    this.tts.speak({
      text: this.text,
      rate: this.rate / 10,
      locale: this.locale
    })
      .then(() => console.log('Success'))
      .catch((reason: any) => console.log(reason));
  }

}

4. Update UI

To use all of the described parameters, let’s create the appropriate components on UI. <ion-input> for text, <ion-range>for speed rate, <ion-select> for choosing locales. The minimum value for speed rate will be 0 and maximum - 30. The step will be - 1. While calling speak method we will reduce the speed rate value from<ion-range> by 10 times to make it like minimum value equal to 1 and maximum - 3.

Modify src/pages/home/home.html like to the following code:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Text To Speech
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <!--Text-->
    <ion-item>
      <ion-label>Text</ion-label>
      <ion-input [(ngModel)]="text"></ion-input>
    </ion-item>
    <!--Rate-->
    <ion-item>
      <ion-range min="1" max="30" step="1" [(ngModel)]="rate">
        <ion-icon small range-left name="remove"></ion-icon>
        <ion-icon small range-right name="add"></ion-icon>
      </ion-range>
    </ion-item>
    <!--Language-->
    <ion-item>
      <ion-label>Language</ion-label>
      <ion-select [(ngModel)]="locale">
        <ion-option value="ru_RU">Russian</ion-option>
        <ion-option value="en-US">English</ion-option>
      </ion-select>
    </ion-item>
    <!--Play text-->
    <button ion-button full (click)="playText()">Play Text</button>
  </ion-list>
</ion-content>

The final UI will look like this:

Main Screen

Main screen when choosing language

Summary

As you can see it’s not something quite complex to make your app speak. Probably, you can make something similar to Siri using Ionic and this plugin.

If you have any questions, advice, feel free to leave them in the comments!