react-audio-transcriber-hook

A custom React hook that provides voice recording capabilities with real-time speech recognition. This hook makes it easy to add voice recording and transcription features to your React applications.

Installation

npm install react-audio-transcriber-hook

Features

• Voice recording with automatic time limit
• Real-time speech recognition and transcription
• Audio blob creation for playback or upload
• Simple start/stop/reset controls
• Error handling with toast notifications
• Configurable recording duration

Usage

import { useVoiceRecorder } from "react-audio-transcriber-hook";

function VoiceRecorderComponent() {
  const {
    isRecording,
    audioBlob,
    transcribedText,
    startRecording,
    stopRecording,
    resetRecorder,
  } = useVoiceRecorder(60000); // 60 seconds limit

  return (
    <div>
      <button onClick={isRecording ? stopRecording : startRecording}>
        {isRecording ? "Stop Recording" : "Start Recording"}
      </button>
      <button onClick={resetRecorder}>Reset</button>

      {audioBlob && <audio controls src={URL.createObjectURL(audioBlob)} />}

      {transcribedText && <p>Transcription: {transcribedText}</p>}
    </div>
  );
}

API Reference

Hook Parameters

| Parameter | Type | Default | Description | | -------------- | ------ | ------- | ------------------------------------------ | | recordingLimit | number | 60000 | Maximum recording duration in milliseconds |

Return Values

| Value | Type | Description | | --------------- | ------------ | --------------------------------- | | isRecording | boolean | Current recording status | | audioBlob | Blob | null | Recorded audio as a Blob | | transcribedText | string | Real-time speech recognition text | | startRecording | function | Starts the voice recording | | stopRecording | function | Stops the current recording | | resetRecorder | function | Resets all recording data |

Browser Compatibility

This hook requires browser support for:

• MediaRecorder API
• Web Speech Recognition API
• getUserMedia API

License

ISC

Author

Novneet Singh

Contributing

Feel free to submit issues and enhancement requests!

Dependencies

• react-hot-toast: For error notifications
• react: Peer dependency