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-openaikey

Usage

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

import React, { useState } from "react";
import AudioRecorder from "speechtotext-openaikey/dist/AudioRecorder";
import ReactAudioPlayer from "react-audio-player";

// Define the type for the recorded data
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.

Dependencies

• howler: A JavaScript audio library for the modern web.
• react-audio-player: A simple React component to play audio files.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request with any improvements or bug fixes.

Acknowledgments

Special thanks to the OpenAI team for providing the transcription services used in this project.