🎙️ use-audio-capture

A lightweight, zero-dependency React hook for audio recording using native Web APIs (MediaRecorder, getUserMedia). Perfect for building voice notes, podcasts, interviews, and real-time audio processing applications in React.

🚀 Why use-audio-capture?

Stop struggling with complex audio libraries! This React hook leverages native browser APIs to provide:

• 🎯 Simple API - Start recording with just one function call
• 🪶 Lightweight - Zero external dependencies, uses native Web APIs
• 🔧 TypeScript Support - Fully typed for excellent developer experience
• 🎛️ Full Control - Start, stop, pause, resume recordings programmatically
• 📊 Real-time Data - Access audio chunks as they're recorded
• 🚨 Error Handling - Built-in error management for robust applications
• 🌐 Cross-browser - Works in all modern browsers supporting MediaRecorder API

📦 Installation

npm install use-audio-capture

yarn add use-audio-capture

pnpm add use-audio-capture

🎯 Use Cases

Perfect for building:

• 🎙️ Voice note applications
• 🎧 Podcast recording tools
• 📞 Interview and meeting recorders
• 🎵 Music practice apps
• 🗣️ Voice memos and dictation tools
• 📱 Audio chat applications
• 🎬 Content creation platforms
• 🔊 Audio feedback systems
• 🎤 Karaoke and singing apps
• 📚 Language learning tools with pronunciation

🏁 Quick Start

Basic Audio Recording

import { useAudioCapture } from 'use-audio-capture';

export const VoiceRecorder = () => {
  const { start, stop, pause, resume } = useAudioCapture({
    onStart: () => console.log('🎙️ Recording started'),
    onChunk: (blobEvent) => console.log('Blob event here'),
    onStop: (event, chunks) => {
      // You can create audio file from recorded chunks on stop
      const blob = new Blob(chunks, { type: chunks[0].type });
      const file = new File([blob], 'sampleFile.webm', {
        type: chunks[0].type,
      });
      console.log(file);
    },
    onError: (_event, { error }) => {
      console.error('Recording error:', error);
    },
  });

  return (
    <div>
      <button onClick={start}>🎙️ Start Recording</button>
      <button onClick={stop}>⏹️ Stop</button>
      <button onClick={pause}>⏸️ Pause</button>
      <button onClick={resume}>▶️ Resume</button>
    </div>
  );
};

📖 See Live Example | 🎨 Storybook Demo

More Advanced Example

Component example built based on use-audio-capture hook - See live example

📚 API Reference

Hook Usage

const { start, stop, pause, resume } = useAudioCapture(options);

Available Functions

| Function | Description | Usage | | ---------- | ------------------------------------------ | ---------------- | | start() | Start audio recording | await start() | | stop() | Stop recording and trigger onStop callback | await stop() | | pause() | Pause current recording session | await pause() | | resume() | Resume paused recording | await resume() |

Callback Options

| Callback | Triggered When | Parameters | | ---------- | ------------------------ | ------------------------------------ | | onStart | Recording begins | (event, { mediaStream }) | | onChunk | New audio data available | (blobEvent, { mediaStream }) | | onStop | Recording stops | (event, chunks[], { mediaStream }) | | onPause | Recording paused | (event, chunks[], { mediaStream }) | | onResume | Recording resumed | (event, chunks[], { mediaStream }) | | onError | Error occurs | (event, { mediaStream, error }) |

🌐 Browser Support

This hook works in all modern browsers that support:

• MediaRecorder API
• getUserMedia API

| Browser | Support | | ------- | ------- | | Chrome | ✅ 47+ | | Firefox | ✅ 29+ | | Safari | ✅ 14+ | | Edge | ✅ 79+ |

📄 License

MIT © breeg554

Keywords: react hook, audio recording, web api, mediarecorder, getusermedia, voice notes, podcast, interview, real-time audio, browser recording, typescript, react audio, voice recorder, audio capture, microphone access