Using the Web Speech API in React

Using the Web Speech API in a React Project is remarkably easy. The Web Speech API provides speech recognition and speech synthesis (text to speech aka tts). To use in your React Project, first run:

npm install --save react-speech-recognition

Then make a new functional Component in your project:

const Dictaphone = () => {
  const { transcript, resetTranscript } = useSpeechRecognition()

  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    return null
  }

  return (
    <div>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <button onClick={SpeechRecognition.stopListening}>Stop</button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  )
}
export default Dictaphone

Don’t forget to import SpeechRecognition at the top of your component file:

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

In the app I build using the Web Speech API, Voice2Vibes, I wanted to use the transcript to set commands that the user could call, that would fire a callback function to write to a bluetooth device characteristic. So, I set a variable in my App state equal to transcript and passed the function to update it to my component via props. I then used useEffect to reset the state transcript every time the dictaphone transcript was updated:

useEffect(() => {
setTranscript(transcript)
}, [transcript])

Additionally, I wanted to utilize Continuous Listening that would continuously listen to and transcribe a user’s ongoing speech. I added buttons to start and stop continuous listening, and used hooks to set a continuousListen state on my component. If the state was true (updated on the start continuous listening button), I used useEffect to start an interval. After every 20 seconds, the resetTranscript() is called to clear the transcript display, and a new interval starts. This prevents the transcript from over taking the page. Finally, continuousListen is set back to false on clicking the stop continuous listen button, and the interval is no longer running (and neither is the auto-reset of the transcript).

const [continuousListen, setContinousListen ] = useState(false)

useEffect(() => {
if (continuousListen === true){
const interval = setInterval(() => {
resetTranscript()
}, 20000)
return () => clearInterval(interval)
}
}, [continuousListen])
const StartContinousListening = () => {
setContinousListen(true)
SpeechRecognition.startListening( {continuous: true })
}
const stopListening = () => {
setContinousListen(false)
SpeechRecognition.stopListening()
}

Finally, because startListening stops after the natural end or pause in a user’s speech. I removed the “Stop” button. My final component looks like this:

import { useEffect, useState } from 'react'
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
function Dictaphone({ setTranscript }) {
const { transcript, resetTranscript } =  useSpeechRecognition({ commands })
const [continuousListen, setContinousListen ] = useState(false)
useEffect(() => {
setTranscript(transcript)
}, [transcript])
useEffect(() => {
if (continuousListen === true){
const interval = setInterval(() => {
resetTranscript()
}, 20000)
return () => clearInterval(interval)
}
}, [continuousListen])
const StartContinousListening = () => {
setContinousListen(true)
SpeechRecognition.startListening( {continuous: true })
}
const stopListening = () => {
setContinousListen(false)
SpeechRecognition.stopListening()
}
if(!SpeechRecognition.browserSupportsSpeechRecognition()) {
return null
}
return (
<div className="dictaphone">
<p>{ transcript }</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={resetTranscript}>Reset</button>
<button onClick={StartContinousListening}>LISTEN MODE</button>
<button onClick={stopListening}>STOP LISTEN MODE</button>
</div>
)
}
export default Dictaphone

Voice2Vibes

Fun with the Web Bluetooth API and React