How does voice command work? Can you use voice command to control a video? How can you implement voice command as a feature in your React app? These are questions I asked myself as I was working on building an app with embedded video. I wanted to be able to control the video hands-free using voice command.

I ran into a common problem: I was not finding resources that walked through the steps required to set it up for my specific use case. I did not find a site that had voice command built in to control content, and I did not find many blogs walking through the process of setting up this kind of feature.

With that said, now that I have found a solution, here is my walkthrough on how to get a voice command feature set up to control video in your React app.

1. Integrate the Web Speech API

For voice recognition, I utilized the React Hook  react-speech-recognition, which uses Web Speech API behind the scenes. This allowed me to very quickly access functions of the computer’s microphone to track what a user is saying.

To install it, use the following command in your terminal:

npm install — save react-speech-recognition

Then at the top of your React file, import it using the following code:

import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'

My app is a recipe and cooking site where I have an embedded walkthrough video for each recipe. I wanted to control that video using voice command, so I imported this speech recognition functionality into my Recipe Detail Page component. For your project, import this directly into the component that will be accessing the speech recognition functionality.

#voices #web-speech-api #react #javascript