Speech-to-Text with React.js

August 19, 2024 · 1 min read

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.

It takes less than 90 seconds to get it up and running!

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.