Overview

React Speech Recognition is a react hook that accesses the Web Speech API to convert speech from the machine’s microphone to the app’s React components.

There are two hooks in this framework:

• useSpeechRecognition, a React hook that gives component access to a transcript of speech picked up from the user’s microphone.
• SpeechRecognition manages the global state of the Web Speech API, exposing functions to turn the microphone on and off.

Prerequisites

This version requires React 16.8 so that React hooks can be used; please see the full framework

Note: This framework uses WebSpeech API. Browser support for this API is currently limited, with Chrome having the best experience. As of June 2020 these browsers support the API:

• Chrome (desktop): this is by far the smoothest experience
• Microsoft Edge
• Chrome (Android): a word of warning about this platform: there can be an annoying beeping sound when turning the microphone on. This is part of the Android OS and cannot be controlled from the browser
• Android webview
• Samsung Internet

What We’ll Make

I will be making a simple voice memo app with basic voice commands that run in the browser. If you would like to follow this tutorial, please be ready to work with the create-react-app boilerplate.

Let’s Get Started

#react #react speech #react hook #javascript