use-audio-capture

🎙️ 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