Ionic 4 | Text to Speech Ionic Native Plugin tutorial for Ionic 4 Application

Ever wondered about a feature to convert text to speech? Yes, it’s possible to make you Ionic application speak the text. By using Text To Speech Cordova plugin we can easily add this feature in hybrid application.

Text to Speech Ionic Native plugin can be used to read out text in local in a beautiful female voice 😛  You can also adjust the pace of speech by adding using options available.

Here we will create a new Ionic 4 Application and demonstrate how to use Text to Speech plugin in Ionic 4 application.

Let’s get started!

Create a new Ionic 4 application

Start with a new Ionic 4 application. Make sure you have the latest version of Ionic CLI installed (Current v5.2.0)

 

Install Text to Speech Cordova and Ionic Native plugins

Run following NPM command to install Cordova and Native wrapper for plugin

Import Plugin in Module

After installation of the plugin, open app.module.ts file to import then add the plugin in providers array as shown below:

 

Add Text to Speech in Component

Let’s use plugin functionality in the home component which is created by default in the blank template.
Import TextToSpeech then add in the class constructor, after that we will call speak method taking string as an argument. speak method return promise.
we have an array text_sentences of some sample strings which will be converted to speech by plugin method.

In the home.page.html file, we will have a list of text strings with sliding option menu. There ‘Speak‘ action will call textToSpeech method will pass the string to out plugin’s speak() method in component.

That’s it you can now run an app in a real device to test Text to Speech function.

Options

There are some important options available used as follows:

locale: For a specific language option

rate: From 0-1 to change the pace of speaking the text

Conclusion: This plugin can add an extra plus point in the application and can be useful in many ways like adding a button to speak text information.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of