React Speech Recognition
is a
React Hook
that works with the Web Speech API to translate speech from your device’s mic into text. This text can then be read by your React app and used to perform tasks.
React Speech Recognition provides a command option to perform a certain task based on a specific speech phrase. For example, when a user asks for weather information, you can perform a weather API call. This is just a basic example, but when it comes to voice assistance and control,
the possibilities are endless
.
Browser support
As of February 2021, React Speech Recognition supports the following browsers:
Google Chrome (recommended)
Microsoft Edge
Google Chrome for Android
Android Webview
Samsung Internet
Unfortunately, iOS does not support these APIs.
React Speech Recognition setup and installation
To add React Speech Recognition to your React project, simply open your terminal and type:
npm i --save react-speech-recognition
When you press enter, this will add the hook to your project.
Build a demo UI
To see how the speech recognition Hook works, we’ll build a simple UI.
First, we’ll add a round button with a mic icon, a button with text to indicate whether or not we are listening to user speech, and a stop button to stop listening.
Below these elements, we’ll show the user’s speech-to-text translation and create a reset button to clear the text and stop listening.
Here is our JSX for the component described above:
As you may have noticed, we also included an animation that will play when listening has started, thereby alerting the user that they can now speak.
Adding React Speech Recognition Hooks
To use React Speech Recognition, we must first import it into the component. We will use the useSpeechRecognition hook and the SpeechRecognition object.
To import React Speech Recognition:
import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";
To start listening to the user’s voice, we need to call the startListening function:
SpeechRecognition.startListening()
To stop listening, we can call stopListening:
SpeechRecognition.stopListening()
To get the transcript of the user’s speech, we will use transcript:
const { transcript } = useSpeechRecognition()
This will record the value whenever a user says something.
To reset or clear the value of transcript, you can call resetTranscript:
Using the resetTranscript function will set the transcript to empty.
Finally, to check whether the browser supports the Web Speech APIs or not, we can use this function:
if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
// Browser not supported & return some useful info.
Full code
With everything we’ve reviewed to this point, we are now ready to set up our code. Note that in the block below, we added the listening events and corresponding states:
Now we have set up the app so that when a user clicks on the mic button, the app will listen to their voice and output a transcript below. You will need to allow microphone permission when you run the first time.
Now comes the fun part: adding commands to perform a task based on user speech/phrases.
Adding commands
To add commands, we must pass an array as a commands option to the useSpeechRecognition.
Before we can do that, however, we must prepare our commands array like so:
Remember that commands is the array of JSON object with command and callback properties. For our purposes, the command is the property where you will write the command; callback will fire correspondingly.
In the example above, you may have noticed that we have passed an asterisk symbol in the first and second command. This symbol allows us to capture multiple words and pass them back as a variable in the callback function.
You can pass the commands variable to useSpeechRecognition like this:
By now, you should hopefully have a better understanding of how you can use React Speech Recognition hooks in your project. For future reading, I recommend learning more about programming by voice and the other ways that AI can assist in your coding endeavors.
Thank you for reading the article. Please leave any feedback or comments below.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
