Text to Speech and Speech to Text in the Ionic Framework

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!



Blast From The Past

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

Easy Virtual Reality with A-Frame

Getting Started with Unit Testing in Ionic 2+ Apps

NgRx State Management with Inclusive Innovation Incubator

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store