Speechtotext-openai NPM

speechtotext-openai

A React component for recording and transcribing audio using the Web Audio API and OpenAI's transcription services.

Installation

To use this package, install it by running the given command in terminal

npm install speechtotext-openai

Usage

Below is an example of how to use the AudioRecorder component in your React application:

import React, { useState } from "react";
import AudioRecorder from "./components/AudioRecorder";
import ReactAudioPlayer from "react-audio-player";

interface RecordedData {
  blob: Blob;
  blobURL: string;
  transcription: string;
  startTime: Date;
  stopTime: Date;
  options: { mimeType: string };
}

const App: React.FC = () => {
  const [transcription, setTranscription] = useState<string>("");
  const [audio, setAudio] = useState<string | undefined>(undefined);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>("");

  const handleStop = (recordedData: RecordedData) => {
    setTranscription(recordedData.transcription);
    setAudio(recordedData.blobURL);
  };

  const handleError = (errorMessage: string) => {
    setError(errorMessage);
    setLoading(false);
  };

  return (
    <div style={{ padding: "20px", textAlign: "center" }}>
      <div style={{ margin: "0 auto", width: "100%", textAlign: "center" }}>
        <AudioRecorder
          openaiApiKey={process.env.REACT_APP_OPENAI_API_KEY as string}
          onStop={handleStop}
          setAudioUrl={setAudio}
          setLoading={setLoading}
          onError={handleError}
          buttonStyle={{
            color: "grey",
            padding: "10px 40px",
            border: "1px solid grey",
            borderRadius: "10px",
            margin: "0 auto",
            fontWeight: "600",
            cursor: "pointer",
          }}
          buttonText={{
            start: <p>Start Recording</p>,
            stop: <p>Stop Recording</p>,
          }}
        />
      </div>
      <div>
        <h2>Transcription</h2>
        <p>
          {transcription ? (
            transcription
          ) : loading ? (
            "Loading ..."
          ) : (
            "No transcription available"
          )}
        </p>
      </div>
      {error && (
        <div>
          <h2>Error</h2>
          <p>{error}</p>
        </div>
      )}
      {audio && (
        <div>
        <h2>Recorded Audio</h2>
          <ReactAudioPlayer src={audio} controls />
        </div>
      )}
    </div>
  );
};

export default App;

Props

onStop: A callback function that is called when the recording stops. It receives an object containing the recorded data, including the blob, blob URL, transcription, start and stop times, and recording options.
setAudioUrl: A function to set the processed audio URL.