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

``bash
npm install use-audio-capture
`

`bash
yarn add use-audio-capture
`

`bash
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

$3

`tsx
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 (



);
};
`

📖 See Live Example | 🎨 Storybook Demo

More Advanced Example

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

📚 API Reference

$3

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

$3

| 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() |

$3

| 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