Speech-to-Text with React.js

Speech-to-text is a technology that converts spoken words into written text. Integrating speech-to-text (STT) technology into an application can bring significant benefits, such as enhancing user experience, accessibility, and overall functionality.

In this article, we will walk you through the process of integrating speech-to-text into a React application using Picovoice's Leopard Speech-to-Text engine.

1. Prerequisites

Sign up for a free Picovoice Console account. Once you've created an account, copy your AccessKey on the main dashboard.

2. Create a React Project:

If you don't already have a React project, start by creating one with the following command:

npx create-react-app leopard-react

3. Install Dependencies:

Install @picovoice/leopard-react and @picovoice/web-voice-processor:

npm install @picovoice/leopard-react @picovoice/web-voice-processor

4. Leopard Model

In order to initialize Leopard, you will need a model file. Download one of the default model files for your desired language and place it in the /public directory of your project.

Create Components

Create a file within /src called VoiceWidget.js and paste the below into it. The code uses Leopard's hook to perform speech-to-text. Remember to replace ${ACCESS_KEY} with your AccessKey obtained from the Picovoice Console and ${MODEL_FILE_PATH} with the path to your model file.

import React from "react";
import { useLeopard } from "@picovoice/leopard-react";

export default function VoiceWidget() {
  const {
    result,
    isLoaded,
    error,
    init,
    processFile,
    startRecording,
    stopRecording,
    isRecording,
  } = useLeopard();

  const initEngine = async () => {
    await init(
      "${ACCESS_KEY}",
      { publicPath: "${MODEL_FILE_PATH}" },
      { enableAutomaticPunctuation: true }
    );
  };

  const toggleRecord = async () => {
    if (isRecording) {
      await stopRecording();
    } else {
      await startRecording();
    }
  };
  
  return (
    <div>
      {error && <p className="error-message">{error.toString()}</p>}
      <br />
      <button onClick={initEngine} disabled={isLoaded}>Initialize Leopard</button>
      <br />
      <br />
      <label htmlFor="audio-file">Choose audio file to transcribe:</label>
      <input
        id="audio-file"
        type="file"
        accept="audio/*"
        disabled={!isLoaded}
        onChange={async (e) => {
          if (!!e.target.files?.length) {
            await processFile(e.target.files[0])
          }
        }}
      />
      <br />
      <label htmlFor="audio-record">Record audio to transcribe:</label>
      <button id="audio-record" disabled={!isLoaded} onClick={toggleRecord}>
        {isRecording ? "Stop Recording" : "Start Recording"}
      </button> 
      <h3>Transcript:</h3>
      <p>{result?.transcript}</p>
    </div>
  );
}

Modify App.js to display the VoiceWidget:

import VoiceWidget from "./VoiceWidget";

function App() {
  return (
    <div className="App">
      <h1>
        Leopard React Demo
      </h1>
      <VoiceWidget />
    </div>
  );
}

export default App;

Start the development server:

npm run start

Once it's running, navigate to localhost:3000 and click the "Initialize Leopard" button. Once Leopard has initialized, upload an audio file or record audio to see the transcription.

Additional Languages

Leopard supports many more languages aside from English. To use models in other languages, refer to the Leopard Speech-to-Text React quick start guide.

Source Code

The source code for the complete demo with Leopard React is available on its GitHub repository.

Have you seen our other React.js tutorials? Don’t forget to check out Real-time Transcription with React.js and Wake Word Detection with React.js.