Text to Speech and Speech to Text in the Ionic Framework - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development
Blog page

Recently we hosted a meetup about implementing Text-to-Speech and Speech-to-Text. These features sound like something that would be difficult to implement but luckily there exist some Cordova plugins that abstract the complexity for us. These make it incredibly easy to enhance your app with accessibility or control it in a unique way

The source code for this project can be found here.

Text to Speech

The first plugin we used was vilic’s Text-to-Speech plugin. This one is a no-brainer, one of the easiest to use plugins you can find for Ionic. After you install it using the instructions on the Ionic site and inject the service, you can make the device speak any text with literally one function call.

Speech to Text

Plugin #2, pbakondy’s Speech Recognition plugin, offers an easy way to turn the user’s voice into text. Due to the logistics of getting permission from the user to capture their voice and guessing what they are saying, the code to do this is a bit more than turning text into speech, but we don’t have to deal with most of it due to the power of plugins. Installation instructions can be found on Ionic’s website.

Before we do anything, we need to make sure we have the right permissions to record the user. Luckily this amazing plugin gives us just what we need to check for permission and ask for it if we don’t already have it.

 

Once we have permission, all we need to need to do is tell the service to start listening.

We use the language code “en-EN” to tell the plugin that we should be listening for English words and sentences. Of course, you can always tell the plugin to listen for different languages to transcribe by using a different language code. The plugin offers us a convenient way to query all the languages supported by the device.

The second parameter that we pass to the match function is “matches.” This tells us how many matches we want from the plugin, in case the user’s input can be taken as saying different things that sound similar.

Check Us Out

We regularly host meetups about the technology we like to use, so stop by our Meetup page or Eventbrite and sign up. If you’re interested in talking or hearing about a topic, let us know!

Meetup

The Washington DC Ionic Framework Meetup

Washington, DC
105 Members

This is a group for anyone interested in the Ionic Framework for web and mobile application development, including¬† PWAs or Progressive Web Apps… This includes related techn…

Next Meetup

Kick Back & Code – Special Edition – FREE PREVIEW: Ionic Wor…

Thursday, Sep 6, 2018, 6:30 PM
7 Attending

Check out this Meetup Group →

 

Eventbrite

Blast From The Past

We have blog posts for other past meetups. Read them!

Getting Started with Unit Testing in Ionic 2+ Apps
NgRx State Management with Inclusive Innovation Incubator
The Washington Ionic Framework Meetup: Session 1 – State Management with MobX