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