react-speech-to-text-toolkit

react-speech-to-text-toolkit is a lightweight library for integrating speech-to-text functionality into your React applications. Leveraging the Web Speech API, this package provides a simple and effective way to convert speech into text.

Installation

To add react-speech-to-text-toolkit to your React project, use the following command:

  npm install react-speech-to-text-toolkit

or if you are using Yarn:

  yarn add react-speech-to-text-toolkit

Usage

Import the useSpeechRecognition hook from the package:

import { useSpeechRecognition } from "react-speech-to-text-toolkit";

Initialize the useSpeechRecognition hook in your component:

const { startRecording, stopRecording, text, isRecording, isBrowserSupported } =
  useSpeechRecognition();

Example

Here's a basic example of how to use react-speech-to-text-toolkit:

import { useSpeechRecognition } from "react-speech-to-text-toolkit";
function App() {
  const {
    startRecording,
    stopRecording,
    text,
    isRecording,
    isBrowserSupported,
  } = useSpeechRecognition();

  if (!isBrowserSupported) {
    return <p>Browser does not support speech recognition</p>;
  }
  return (
    <>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
      <p>Speech To Text: {text}</p>
    </>
  );
}

export default App;

API

The useSpeechRecognition hook provides the following functionalities and state information:

startRecording

• Type: Function
• Description: Starts the speech recognition process. Use this function to begin capturing and transcribing speech.

stopRecording

• Type: Function
• Description: Stops the speech recognition process. Use this function to end the current speech recognition session.

text

• Type: String
• Description: The current transcript of the speech. This state is updated with the transcribed text from the user's speech.

isRecording

• Type: Boolean
• Description: Indicates if recording is in progress. This boolean value is true while the speech recognition is active and false otherwise.

isBrowserSupported

• Type: Boolean
• Description: Indicates if the browser supports speech recognition. This value is true if the Web Speech API is available in the browser and false otherwise.

Author

Zohaib Ahmad