React Audio Recorder AI

A powerful and flexible React library for audio recording with real-time visualization and WebSocket streaming support.

Features

• 🎤 Easy audio recording with React hooks
• 📊 Real-time audio visualization using react-audio-visualize
• 🔄 WebSocket streaming support for real-time audio processing
• ⏸️ Pause/Resume functionality
• 🎨 Customizable UI with CSS classes and custom icons
• 📱 TypeScript support with full type definitions
• 🚀 Lightweight and dependency-minimal

Installation

npm install react-audio-recorder-ai

Usage

Basic Usage

import React from 'react';
import { AudioRecorder, useAudioRecorder } from 'react-audio-recorder-ai';

function App() {
  const handleRecordingComplete = (blob: Blob) => {
    console.log('Recording completed:', blob);
  };

  const handleCloseAudio = () => {
    console.log('Recording closed');
  };

  return (
    <AudioRecorder
      onRecordingComplete={handleRecordingComplete}
      onCloseAudio={handleCloseAudio}
      showVisualizer={true}
    />
  );
}

export default App;

Using the Hook Separately

import React from 'react';
import { useAudioRecorder } from 'react-audio-recorder-ai';

function CustomRecorder() {
  const {
    startRecording,
    stopRecording,
    togglePauseResume,
    isRecording,
    isPaused,
    recordingTime,
    recordingBlob,
  } = useAudioRecorder();

  return (
    <div>
      <button onClick={startRecording} disabled={isRecording}>
        Start Recording
      </button>
      <button onClick={stopRecording} disabled={!isRecording}>
        Stop Recording
      </button>
      <button onClick={togglePauseResume} disabled={!isRecording}>
        {isPaused ? 'Resume' : 'Pause'}
      </button>
      <p>Recording Time: {recordingTime}s</p>
      <p>Status: {isRecording ? (isPaused ? 'Paused' : 'Recording') : 'Stopped'}</p>
    </div>
  );
}

Custom Icons

import React from 'react';
import { AudioRecorder } from 'react-audio-recorder-ai';
import { FiMic, FiSquare, FiPlay, FiPause } from 'react-icons/fi';

const CustomMicIcon = ({ size, className }: { size?: number; className?: string }) => (
  <FiMic size={size} className={className} />
);

function App() {
  return (
    <AudioRecorder
      onRecordingComplete={(blob) => console.log(blob)}
      onCloseAudio={() => console.log('closed')}
      icons={{
        micIcon: CustomMicIcon,
        stopIcon: ({ size, className }) => <FiSquare size={size} className={className} />,
        playIcon: ({ size, className }) => <FiPlay size={size} className={className} />,
        pauseIcon: ({ size, className }) => <FiPause size={size} className={className} />,
      }}
    />
  );
}

WebSocket Streaming

import React, { useEffect, useRef } from 'react';
import { useAudioRecorder } from 'react-audio-recorder-ai';

function WebSocketRecorder() {
  const websocketRef = useRef<WebSocket | null>(null);
  const recorderControls = useAudioRecorder();

  useEffect(() => {
    websocketRef.current = new WebSocket('wss://your-websocket-server.com');
    
    return () => {
      websocketRef.current?.close();
    };
  }, []);

  // Send audio buffer to WebSocket when available
  useEffect(() => {
    if (recorderControls.arrBuffer && websocketRef.current?.readyState === WebSocket.OPEN) {
      websocketRef.current.send(recorderControls.arrBuffer);
    }
  }, [recorderControls.arrBuffer]);

  return (
    <div>
      <button onClick={recorderControls.startRecording}>Start Streaming</button>
      <button onClick={recorderControls.stopRecording}>Stop Streaming</button>
    </div>
  );
}

API Reference

AudioRecorder Component

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onRecordingComplete | (blob: Blob) => void | - | Called when recording is completed | | onCloseAudio | () => void | - | Called when recording is closed/cancelled | | onNotAllowedOrFound | (exception: DOMException) => void | - | Called when microphone access is denied | | recorderControls | recorderControls | - | External recorder controls from useAudioRecorder hook | | audioTrackConstraints | MediaAudioTrackConstraints | - | Audio track constraints for getUserMedia | | showVisualizer | boolean | false | Show real-time audio visualization | | mediaRecorderOptions | MediaRecorderOptions | - | Options for MediaRecorder API | | classes | StyleProps | - | Custom CSS classes for styling | | icons | AudioRecorderIconProps | - | Custom icon components |

useAudioRecorder Hook

Parameters

• audioTrackConstraints?: Audio constraints for recording
• onNotAllowedOrFound?: Error handler for microphone access
• mediaRecorderOptions?: MediaRecorder configuration

Returns

{
  startRecording: () => void;
  stopRecording: () => void;
  togglePauseResume: () => void;
  recordingBlob?: Blob;
  arrBuffer?: ArrayBuffer;  // For WebSocket streaming
  isRecording: boolean;
  isPaused: boolean;
  recordingTime: number;    // in seconds
  mediaRecorder?: MediaRecorder;
}

Types

StyleProps

interface StyleProps {
  AudioRecorderClass?: string;
  AudioRecorderStartSaveClass?: string;
  AudioRecorderTimerClass?: string;
  AudioRecorderStatusClass?: string;
  AudioRecorderPauseResumeClass?: string;
  AudioRecorderDiscardClass?: string;
}

MediaAudioTrackConstraints

type MediaAudioTrackConstraints = Pick<
  MediaTrackConstraints,
  | 'deviceId'
  | 'groupId'
  | 'autoGainControl'
  | 'channelCount'
  | 'echoCancellation'
  | 'noiseSuppression'
  | 'sampleRate'
  | 'sampleSize'
>;

CSS Classes

The component comes with default CSS classes that you can style:

.audio-recorder {
  /* Main container */
}

.audio-recorder.recording {
  /* Container when recording */
}

.audio-recorder-mic {
  /* Microphone button */
}

.audio-recorder-options {
  /* Control buttons (pause/stop) */
}

.audio-recorder-timer {
  /* Timer display */
}

.audio-recorder-status {
  /* Recording status text */
}

.audio-recorder-status-dot {
  /* Recording indicator dot */
}

.audio-recorder-visualizer {
  /* Visualizer container */
}

Browser Support

• Chrome 66+
• Firefox 60+
• Safari 14+
• Edge 79+

License

MIT © minhtq97

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request