{"componentChunkName":"component---src-templates-tag-js","path":"/tags/react-speech-recognition/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/quick-look-at-react-speech-recognition/"},"html":"

Overview

\n

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.

\n

There are two hooks in this framework:

\n\n

Prerequisites

\n

This version requires React 16.8 so that React hooks can be used; please see the full framework README here for more information.

\n

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:

\n\n

What We’ll Make

\n

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.

\n

\n \n \n

\n

Let's Get Started

\n

Step 1: Setting up the workspace

\n
    \n
  1. Create a new react app with create-react-app.
    2. \n
\n
npx create-react-app dictaphone
\n
    \n
  1. Modify the App.js file and add the dictaphone component like so:
    2. \n
\n
import Dictaphone from './dictaphoneSetup.js'\n\nfunction App() {\n  return (\n    <div className="App">\n      <header className="Dictaphone-Tester">\n        <Dictaphone />\n      </header>\n    </div>\n  );\n}\n\nexport default App;
\n

NOTE: We haven't built the Dictaphone component yet; we'll jump into that next!

\n
    \n
  1. In the root directory of your app, install the react hook using:
    2. \n
\n
npm i react-speech-recognition
\n
    \n
  1. Create a file to house the Dictaphone component in your src directory and import the necessary dependencies:
    2. \n
\n
import React, { useEffect, useState } from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
\n

And that's it for our basic setup!

\n

Step 2: Setting up the dictaphone

\n
    \n
  1. First, we will build the skeleton of our component:
    2. \n
\n
import React, { useEffect, useState } from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';\n\nconst Dictaphone = () => {\n return (\n   <div></div>\n );\n};\n\nexport default Dictaphone1;
\n
    \n
  1. \n

    Next, we need to fetch certain props out of useSpeechRecognition. The props we will need are transcript, interimTranscript, finalTranscript, resetTranscript, and listening. You can do so like this:

    \n
    const {\ntranscript,\ninterimTranscript,\nfinalTranscript,\nresetTranscript,\nlistening,\n} = useSpeechRecognition();
    \n

    We will also need to enable commands through this hook so add commands to gain access:

    \n
    } = useSpeechRecognition({ commands });
    \n
    2. \n
  2. \n

    Moving swiftly onward, we need to need to add several functions that are built into the hook and React. First we will be using useEffect to print the transcript to the page.

    \n
    useEffect(() => {\nif (finalTranscript !== '') {\n console.log('Got final result:', finalTranscript);\n}\n}, [interimTranscript, finalTranscript]);
    \n
    3. \n
  3. Then, we will add a listening function to start our dictaphone and throw in a quick conditional to alert the user if their browser is not compatible with this API. These functions would look like:
    4. \n
\n
 if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n   return null;\n }\n\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n   console.log('Your browser does not support speech recognition software! Try Chrome desktop, maybe?');\n }\n const listenContinuously = () => {\n   SpeechRecognition.startListening({\n     continuous: true,\n     language: 'en-GB',\n   });\n };
\n

Step 3: Building the dictaphone controls and page elements

\n

We will add some page elements to access our dictaphone and print the words to the page. We will need three buttons: stop, listen, and reset - to control the dictaphone and reset the transcript. We may also want to add an indicator that informs the user if the dictaphone is listening or not. Within Dictaphone's return div create the following elements:

\n
    \n
  1. A span that houses a ternary conditional that uses the listening prop of useSpeechRecognition to tell if the dictaphone is currently accessing the microphone or not. Add a 'Listening:' label for clarity reasons (Please see below diagram for more precise explanation).
    2. \n
  2. A reset button that will use the built-in function resetTranscript to- you guessed it- reset the transcript.
    3. \n
  3. A listen and stop button that will use the functions listenContinuously and SpeechRecogniton.stopListening respectively to control the dictaphone.
    4. \n
  4. One last span where we are housing our transcript.
    5. \n
\n

Your return statement should look similar to this:

\n
  return (\n    <div>\n      <div>\n        <span>\n          listening:\n          {' '}\n          {listening ? 'on' : 'off'}\n        </span>\n        <div>\n          <button type="button" onClick={resetTranscript}>Reset</button>\n          <button type="button" onClick={listenContinuously}>Listen</button>\n          <button type="button" onClick={SpeechRecognition.stopListening}>Stop</button>\n        </div>\n      </div>\n      <div>\n        <span>{transcript}</span>\n      </div>\n    </div>\n  );
\n

If you go to localhost:3000 in your browser, the dictaphone should now be working.

\n

Step 4: Adding commands

\n

Now that our dictaphone is working, let's add some commands. We won't do anything too complicated but instead access the functions we already have at our disposal.

\n

Within the dictaphone component, declare an array called commands. This will be an array of objects containing two properties each:

\n\n

A voice command that resets the transcript should look like this:

\n
 const commands = [\n   {\n     command: 'reset',\n     callback: () => resetTranscript()\n   },\n   {\n     command: 'clear',\n     callback: () => resetTranscript()\n   }\n ]
\n

When the dictaphone picks up the words 'reset' or 'clear' from the user's speech, it will execute the callback associated with the command.

\n

Let's add a response feature. If we add a react hook to manipulate the state like this:

\n
const [message, setMessage] = useState('');
\n

Then add the message to the output, we can add commands that generate a response. For instance, if I were to say ‘Hello’, the app would print back 'Hi there!' or something to that effect. Below, I've written some simple commands.

\n
 const commands = [\n   {\n     command: 'reset',\n     callback: () => resetTranscript()\n   },\n   {\n     command: 'shut up',\n     callback: () => setMessage('I wasn\\'t talking.')\n   },\n   {\n     command: 'Hello',\n     callback: () => setMessage('Hi there!')\n   },\n ]
\n

With that our quick dictaphone is complete! Take a look at this code where it all comes together:

\n
import React, { useEffect, useState } from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';\n\nconst Dictaphone1 = () => {\n const [message, setMessage] = useState('');\n const commands = [\n   {\n     command: 'reset',\n     callback: () => resetTranscript()\n   },\n   {\n     command: 'shut up',\n     callback: () => setMessage('I wasn\\'t talking.')\n   },\n   {\n     command: 'Hello',\n     callback: () => setMessage('Hi there!')\n   },\n ]\n const {\n   transcript,\n   interimTranscript,\n   finalTranscript,\n   resetTranscript,\n   listening,\n } = useSpeechRecognition({ commands });\n\n useEffect(() => {\n   if (finalTranscript !== '') {\n     console.log('Got final result:', finalTranscript);\n   }\n }, [interimTranscript, finalTranscript]);\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n   return null;\n }\n\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n   console.log('Your browser does not support speech recognition software! Try Chrome desktop, maybe?');\n }\n const listenContinuously = () => {\n   SpeechRecognition.startListening({\n     continuous: true,\n     language: 'en-GB',\n   });\n };\n return (\n   <div>\n     <div>\n       <span>\n         listening:\n         {' '}\n         {listening ? 'on' : 'off'}\n       </span>\n       <div>\n         <button type="button" onClick={resetTranscript}>Reset</button>\n         <button type="button" onClick={listenContinuously}>Listen</button>\n         <button type="button" onClick={SpeechRecognition.stopListening}>Stop</button>\n       </div>\n     </div>\n     <div>\n       {message}\n     </div>\n     <div>\n       <span>{transcript}</span>\n     </div>\n   </div>\n );\n};\n\nexport default Dictaphone1;
\n

Thanks for following along, and I hope this helps!

\n","frontmatter":{"date":"October 29, 2020","updated_date":null,"title":"A Quick Look at the React Speech Recognition Hook","tags":["React","React Speech Recognition","React Speech","React Hook"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/afc3c0521bd8ce193a512ce11759f91c/14b42/mic.jpg","srcSet":"/static/afc3c0521bd8ce193a512ce11759f91c/f836f/mic.jpg 200w,\n/static/afc3c0521bd8ce193a512ce11759f91c/2244e/mic.jpg 400w,\n/static/afc3c0521bd8ce193a512ce11759f91c/14b42/mic.jpg 800w,\n/static/afc3c0521bd8ce193a512ce11759f91c/47498/mic.jpg 1200w,\n/static/afc3c0521bd8ce193a512ce11759f91c/0e329/mic.jpg 1600w,\n/static/afc3c0521bd8ce193a512ce11759f91c/c3e15/mic.jpg 4240w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Krista Singleton","github":"krissingl","avatar":null}}}}]}},"pageContext":{"tag":"React Speech Recognition"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}