A powerful React hook-based voice recording library with real-time audio visualization and comprehensive browser support
npm install react-voice-recorder-pro


Powerful and easy voice recording in React! ๐
React Voice Recorder Pro is an all-in-one hook-based library for implementing voice recording functionality in React applications. It leverages Web Audio API and MediaRecorder API to provide high-quality voice recording, real-time audio level measurement, and comprehensive browser compatibility.
Note: This library has no extra audio dependencies. It is implemented purely with standard Web APIs (MediaRecorder, Web Audio) without thirdโparty audio libraries.
Try the demo app here: react-voice-recorder-pro-demo
- ๐ฏ All-in-one Hook: All functionality provided through useVoiceRecorder
- ๐ค Real-time Audio Level: Real-time audio level measurement and visualization during recording
- โฏ๏ธ Complete Recording Control: Start, stop, pause, resume functionality
- ๐ Built-in Player: Instant playback of recorded audio
- ๐ฑ Mobile Optimized: Perfect support for iOS Safari, Android Chrome
- ๐จ TypeScript Support: Complete type safety
- ๐ Browser Compatibility: Chrome, Firefox, Safari, Edge support
- ๐ฆ Lightweight: Optimized bundle size
- ๐ง Flexible Configuration: Various options and customization support
- ๐งฉ No extra deps: Built purely on Web APIs (MediaRecorder, Web Audio) โ no thirdโparty audio libraries
``bash`
npm install react-voice-recorder-proor
yarn add react-voice-recorder-pro
`tsx
import React from 'react';
import { useVoiceRecorder } from 'react-voice-recorder-pro';
function VoiceRecorder() {
const {
isRecording,
isMicrophoneEnabled,
audioLevel,
formattedTime,
recordedBlob,
audioUrl,
error,
startRecording,
stopRecording,
enableMicrophone,
playPause,
isPlaying,
audioRef,
} = useVoiceRecorder();
const handleStartRecording = async () => {
if (!isMicrophoneEnabled) {
await enableMicrophone();
}
startRecording();
};
const handleStopRecording = async () => {
const blob = await stopRecording();
console.log('Recording completed:', blob);
};
return (
Microphone: {isMicrophoneEnabled ? 'Enabled' : 'Disabled'}
{isRecording && (
Recording Time: {formattedTime}
,
height: '100%',
backgroundColor: '#4CAF50'
}}
/>
{recordedBlob && audioUrl && (
export default VoiceRecorder;
`
The main hook that provides all voice recording functionality.
#### Options (VoiceRecorderOptions)
`tsx`
interface VoiceRecorderOptions {
/* MIME type of recorded file (default: 'audio/webm') /
mimeType?: string;
/* Smoothing coefficient for audio level measurement (default: 0.8) /
smoothing?: number;
/* FFT size (default: 2048) /
fftSize?: number;
/* Whether to automatically enable microphone (default: false) /
autoEnableMicrophone?: boolean;
/* Whether to automatically play after recording (default: false) /
autoPlayAfterRecording?: boolean;
}
#### Return Value (UseVoiceRecorderReturn)
`tsx
interface UseVoiceRecorderReturn {
// State
isRecording: boolean; // Whether currently recording
isPaused: boolean; // Whether recording is paused
isMicrophoneEnabled: boolean; // Whether microphone is enabled
isPlaying: boolean; // Whether audio is playing
permission: PermissionState | 'prompt' | 'unknown'; // Microphone permission state
audioLevel: number; // Current audio level (0-1)
elapsedTime: number; // Recording elapsed time (seconds)
formattedTime: string; // Formatted recording time (HH:MM:SS)
recordedBlob: Blob | null; // Recorded audio Blob
audioUrl: string | null; // Audio URL (for playback)
error: string | null; // Error message
// Control functions
startRecording: () => void; // Start recording
pauseRecording: () => void; // Pause recording
resumeRecording: () => void; // Resume recording
stopRecording: () => Promise
enableMicrophone: () => Promise
disableMicrophone: () => void; // Disable microphone
playPause: () => void; // Play/pause recorded audio
reset: () => void; // Reset recording state
resumeAudioContext: () => Promise
// References
audioRef: React.RefObject
}
`
`tsx`
const recorder = useVoiceRecorder({
mimeType: 'audio/mp4', // Use MP4 format
smoothing: 0.9, // Smoother audio level
fftSize: 4096, // More accurate analysis
autoEnableMicrophone: true, // Auto microphone activation
autoPlayAfterRecording: true, // Auto play after recording
});
Individual hooks are also provided for advanced users:
`tsx
import {
useAudioContext,
useAudioMeter,
useAudioPlayer,
useMediaRecorder,
useMicrophone,
useRecordingTimer
} from 'react-voice-recorder-pro';
// Can be used individually
const { audioContext, isRunning, resume } = useAudioContext();
const { stream, isEnabled, enable, disable } = useMicrophone();
// ... other hooks
`
`tsx
import {
getBestAudioFormat,
downloadBlob,
formatFileSize,
formatDuration,
isMediaRecorderSupported
} from 'react-voice-recorder-pro';
// Select optimal audio format
const bestFormat = getBestAudioFormat();
// Download file
downloadBlob(blob, 'my-recording.webm');
// Format file size
const size = formatFileSize(blob.size); // "1.2 MB"
// Format duration
const duration = formatDuration(120); // "2:00"
// Check browser support
if (isMediaRecorderSupported()) {
// MediaRecorder is available
}
`
In iOS Safari, audio context must be activated after user gesture:
`tsx
const { resumeAudioContext } = useVoiceRecorder();
const handleUserInteraction = async () => {
await resumeAudioContext(); // Call after user gesture
// Now recording can be started
};
`
Android Chrome requires no additional setup. It works well with default settings.
| Browser | Version | Support Status |
|---------|---------|----------------|
| Chrome | 80+ | โ
Full Support |
| Firefox | 75+ | โ
Full Support |
| Safari | 13+ | โ
Full Support |
| Edge | 80+ | โ
Full Support |
| iOS Safari | 13+ | โ
Full Support |
| Android Chrome | 80+ | โ
Full Support |
- gzipped: ~15KB
- minified: ~45KB
- Individual hooks: ~3-8KB each
`bashClone repository
git clone https://github.com/yourusername/react-voice-recorder-pro.git
cd react-voice-recorder-pro
$3
`bash
npm test
`๐ Examples
examples/ folder:- Basic Usage
- Advanced Usage
- Voice Memo App
๐ค Contributing
Contributions are welcome! Please follow these steps:
1. Fork this repository
2. Create a feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)This project is distributed under the MIT License. See the LICENSE file for details.
Found a bug? Please report it on the Issues page.
Want to suggest a new feature? Please propose it on the Issues page with the "Feature Request" label.
This library was built with the help of the following open source projects:
- React
- Web Audio API
- MediaRecorder API
- ๐ง Email: rkdalsgh0106@naver.com
---
Build amazing voice recording apps with React Voice Recorder Pro! ๐คโจ