How to convert text to speech in Ionic 3

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:

After finishing, you need to open the project directory:

2. Install the Text-To-Speech plugin

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

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

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

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:

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:

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!

If you liked this, please help spread the word by hitting the recommend button below. Thanks!