React Audio Kit

A lightweight, easy-to-use React library for audio recording and playback.

Features

• 🎙️ Audio recording with pause/resume functionality
• 🎵 Audio playback with seek and volume controls
• ⚡ Optimized performance
• 🎨 Beautiful, customizable UI components
• 🪝 Flexible hooks for custom implementations

Installation

npm install react-audio-kit

Usage

Audio Recorder

import { AudioRecorder } from 'react-audio-kit';

function App() {
  const handleRecordingComplete = (blob) => {
    // Handle the recorded audio blob
    console.log('Recording complete:', blob);
  };

  return (
    <AudioRecorder onRecordingComplete={handleRecordingComplete} />
  );
}

Audio Player

import { AudioPlayer } from 'react-audio-kit';

function App() {
  return (
    <AudioPlayer src="path/to/audio.mp3" />
  );
}

Using Hooks

For custom implementations, you can use the hooks directly:

import { useAudioRecorder, useAudioPlayer } from 'react-audio-kit';

function CustomAudioComponent() {
  const {
    isRecording,
    startRecording,
    stopRecording,
    // ... other methods
  } = useAudioRecorder();

  const {
    isPlaying,
    play,
    pause,
    // ... other methods
  } = useAudioPlayer('audio-url');

  // Build your custom UI
}

API Reference

useAudioRecorder

interface UseAudioRecorderReturn {
  isRecording: boolean;
  isPaused: boolean;
  duration: number;
  audioBlob: Blob | null;
  startRecording: () => Promise<void>;
  stopRecording: () => void;
  pauseRecording: () => void;
  resumeRecording: () => void;
  getAudioUrl: () => string | null;
}

useAudioPlayer

interface UseAudioPlayerReturn {
  isPlaying: boolean;
  currentTime: number;
  duration: number;
  volume: number;
  play: () => Promise<void>;
  pause: () => void;
  seek: (time: number) => void;
  setVolume: (volume: number) => void;
  toggleMute: () => void;
}

License

MIT