Speech Recognition in React

Speech recognition is when a user is able to speak into their computer’s microphone, the speech gets processed into something the readble for the computers on the other end. The servers on the other end then return the interpreted speech into text! Now before I go any further I do want to bring up the fact that this API is not available on all browsers. Check here if you browser is compatible. Though you can utilize the Web Speech API on it’s own, the react-speech-recognition package is going to make life a lot easier for us for how easy the syntax is.

Getting Started

Let’s create first initiate our app using the command create-react-app to build the scaffold for our application.

npx create-react-app speech-recognition

Once that is done building, we’re going to get rid of the boilerplate code it provides so in our App.js we’re just left with a barebones functional component

Implimenting Speech Recognition

Next we want to build a separate component that will handle the speech recognition. But before we do that let’s go and add our package that will set us up for that.

npm install --save react-speech-recognition
or
yarn add react-speech-recognition

Once that package has been added we’ll create a file named SpeechToText.js. We’ll import our package, what this package provides top us is a hook useSpeechRecognition() that provides us a bunch of functions to work with. for this example we’re just going to need the transcript and reset transcript functions from that hook. The transcript function is going to be the function that collects the speech and returns that speech to text, and the resetTranscript function will clear out our current transcript. For our application we’ll want to initiate the voice recognition once the component is mounted. So we will be adding a useEffect hook to start the speech recognition. The speech recognition on it’s own will stop once the user pauses speaking so there is a parameter we can set that we can set to have it continuously listen until. Then of course when we unmount the component we need to clean up our voice recognition so it doesn’t continuously run causing memory leaks.

Displaying the Results of the Speech Recognition

Now that we have our speech recognition set up, we’re going to need to display the results somewhere on the component. In this example let’s create a form that when submitted will give us an alert that will give us a pop up with the results of the transcript and the function to submit the form which we’ll call handleSubmit.

All that is left to do is import our SpeechToText.js component into our App.js and we’re all good to go!

Result: