We will use the [NativeScript Speech Recognition plugin by Eddy Verbruggen](https://github.com/EddyVerbruggen/nativescript-speech-recognition) to convert speech to text. The plugin provides a clean abstraction over the [Android SpeechRecognizer](https://developer.android.com/reference/android/speech/SpeechRecognizer.html) and the [iOS SFSpeechRecognizer](https://developer.apple.com/reference/speech/sfspeechrecognizer).

https://app.egghead.io/api/v1/lessons/javascript-use-speech-recognition-with-nativescript/subtitles

Use Speech Recognition with NativeScript

[00:00] We'll start by adding the plug-in using TNS plug-in add command, and the name of the plug-in is NativeScript Speech Recognition. Now that we have the plug-in, we're going to add a stack layout to our page, and inside of the stack layout, we'll add two buttons. First button, we'll just call it "Start." We'll add a function to the tap event on the button called "Start" also, and we'll do the same with "Stop."

[00:40] We use these to start and stop the Speech Recognition plug-in from executing. Now that we have our two buttons, Start and Stop in our interface, we'll move to the code behind on the main dash page TS.

[00:54] First, we're going to start importing what we need from the NativeScript Speech Recognition plug-in. First thing is we're going to get the speech recognition class, second, we'll get the speech recognition options, and third, take the speech recognition transcription. Next, we need to create the two functions that are banded onto the two buttons we have in our UI -- they are Start and Stop.

[01:31] First thing to do is to create an instance of the speech recognition class. We're going to say "Let speech rec = a new instance of speech recognition." With the new instance of the speech recognition class, we'll go ahead and start calling the methods available. The first thing to do is check whether or not the device supports speech recognition.

[01:57] The plug-in provides the available method, which returns a promise, with the type of a Boolean value. We can simply check if the result is a false value, we can alert that there's no recognition supported on the device, and return.

[02:25] If we're here then we can assume that we can start listening using the recognizer. We'll go speech rec start listening method, which expects an object of the type speech recognition options.

[02:41] We'll create the object, first property is low cal. This is optional, but we'll set it to EN US. Second property here is on result, which is a function that returns a transcript of the type speech recognition transcription.

[03:02] This function will be called when the recognizer is finished listening. Here, we're just going to use an alert, and we'll show protects value that is returned in the transcription.

[03:18] For our stop method, we're simply calling the stop listening function available on the speech recognition class. When we tap the Start button, the device is going to check whether or not it's available to use speech recognition. If so, we'll start listening and then we should see an alert pop up with the text value from the transcript that is returned in the on result callback.

[03:44] I'm going to tap this and speak into my phone. "Hello, Egghead. Hello, Egghead." There you see in the alert, "Hello, Egghead," which is specified in the on result callback.

[04:03] To show an even better example, I'm just going to speak a random sentence and we'll see the output in an alert. "Hey, how are you doing today? Do you want to go to lunch?" There, you see, "Hey, how are you doing today? Do you want to go to lunch?"

Use Speech Recognition with NativeScript

Share this video with your friends