Build a React.js Speech to Text Web App Through Microphone Using react-speech-recognition Library

Welcome folks today in this blog post we will be building a speech to text web app using microphone & react-speech-recognition library in Javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to create a new react.js project using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

And now we need to install the library using the below command

npm i react-speech-recognition

And now you need to edit the App.js file and copy paste the following code

App.js

import React from "react";
import SpeechRecognition, {
  useSpeechRecognition
} from "react-speech-recognition";

const App = () => {
  const { transcript, resetTranscript } = useSpeechRecognition({
    continuous: true
  });

  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 App;

import React from "react";

import SpeechRecognition, {

useSpeechRecognition

} from "react-speech-recognition";

const App = () => {

const { transcript, resetTranscript } = useSpeechRecognition({

continuous: true

});

if (!SpeechRecognition.browserSupportsSpeechRecognition()) {

return null;

}

return (

<div>

<button onClick={SpeechRecognition.startListening}>Start</button>

<button onClick={resetTranscript}>Reset</button>

<p>{transcript}</p>

</div>

);

};

export default App;

As you can see in the above code we have three buttons for starting and stopping the micrphone speech recognition and also we have the paragraph tag where we are displaying the transcript coming directly from the microphone. And here inside this we are using the speech recognition api to start the user microphone and start recording the voice