Unlock the Power of Voice Assistance in Your React App

What is React Speech Recognition?

React Speech Recognition is a game-changing React Hook that harnesses the Web Speech API to convert spoken words into text, allowing your app to respond accordingly. This innovative technology enables you to create voice-controlled experiences that can perform tasks, provide information, and more.

Browser Support

As of February 2021, React Speech Recognition supports a range of browsers, including:

• Google Chrome
• Microsoft Edge
• Google Chrome for Android
• Android Webview
• Samsung Internet

Note that iOS devices do not support these APIs.

Setting Up React Speech Recognition

To get started, simply open your terminal and type:

npm install react-speech-recognition

This will add the hook to your project. Next, build a demo UI to see the speech recognition Hook in action.

Building a Demo UI

Create a simple UI with the following elements:

• A round button featuring a mic icon
• A button to indicate whether the app is listening
• A stop button to halt the process
• A display area to show the user’s speech-to-text translation
• A reset button to clear the text and stop listening

Adding React Speech Recognition Hooks

To utilize React Speech Recognition, import it into your component and use the useSpeechRecognition hook and SpeechRecognition object.

import { useSpeechRecognition } from 'eact-speech-recognition';

const App = () => {
  const { startListening, stopListening, transcript, resetTranscript } = useSpeechRecognition();

  // Start listening to the user's voice
  startListening();

  // Stop listening
  stopListening();

  // Record the user's spoken words
  transcript();

  // Clear the value
  resetTranscript();
}

Using React Speech Recognition to Perform Tasks

Now that you’ve set up the app, it’s time to add commands to perform tasks based on user speech and phrases.

const commands = [
  {
    command: 'hello',
    callback: (value) => console.log(`Hello, ${value}!`),
  },
  {
    command: 'goodbye',
    callback: () => console.log('Goodbye!'),
  },
];

// Prepare your commands array by passing an array of JSON objects with command and callback properties
// This allows you to capture multiple words and pass them back as a variable in the callback function

Full Code and Next Steps

With everything in place, you’re ready to run your app and explore the possibilities of voice assistance. Remember to allow microphone permission when you run the app for the first time.

For future reference, you can find the full code for the app we created using React Speech Recognition Hooks.

Take Your App to the Next Level

By integrating React Speech Recognition into your project, you can unlock a world of possibilities for voice-controlled experiences.

Continue learning about programming by voice and the other ways AI can assist in your coding endeavors.