A lightweight, customizable React voice recorder component with automatic audio compression.
- 🎙️ Simple voice recording with automatic compression
- ⏱️ Configurable recording duration
- 🗜️ Multiple compression levels (none, low, medium, high)
- 🔊 Built-in audio playback
- 📊 File size reporting
- 🎛️ Audio enhancement (noise suppression, echo cancellation)
- 📱 Mobile-friendly and responsive
npm install @ananay-nag/react-voice-recorder
# or
yarn add @ananay-nag/react-voice-recorderThe primary component that handles recording audio with compression.
import { VoiceRecorder } from '@ananay-nag/react-voice-recorder';
function MyRecorder() {
const handleDataRecorded = (data) => {
console.log('Audio recorded:', data);
// data contains: blob, url, type, isRecording, size
};
return (
<VoiceRecorder
onDataRecorded={handleDataRecorded}
duration={60}
compressionLevel="medium"
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
onDataRecorded |
function | - | Callback function that receives recorded audio data |
duration |
number | 60 | Maximum recording duration in seconds |
compressionLevel |
string | 'medium' | Compression level: 'none', 'low', 'medium', or 'high' |
The onDataRecorded callback receives an object with:
{
blob: Blob; // The audio data blob
url: string; // Object URL for the audio blob
type: string; // MIME type of the audio (e.g., "audio/webm")
isRecording: boolean; // Recording status
size?: number; // File size in KB
}Component for playing back recorded audio with file information.
import { PreviewVoiceNote } from '@ananay-nag/react-voice-recorder';
function AudioPlayer({ audioUrl }) {
return (
<PreviewVoiceNote
audioUrl={audioUrl}
/>
);
}| Prop | Type | Description |
|---|---|---|
audioUrl |
string | null | URL to the audio file |
A simple component that displays a recording indicator.
import { RecordingStatus } from '@ananay-nag/react-voice-recorder';
function MyRecordingApp({ isCurrentlyRecording }) {
return (
<div>
<RecordingStatus isRecording={isCurrentlyRecording} />
</div>
);
}| Prop | Type | Description |
|---|---|---|
isRecording |
boolean | Whether recording is in progress |
A utility function to calculate the size of an audio blob in KB.
import { AudioSize } from '@ananay-nag/react-voice-recorder';
function MyAudioInfo({ audioData }) {
const sizeInKB = AudioSize(audioData);
return <div>File size: {sizeInKB} KB</div>;
}| Parameter | Type | Description |
|---|---|---|
audioData |
{ blob: Blob | null } | Object containing an audio blob |
The component supports four compression levels:
| Level | Format | Bitrate | Description |
|---|---|---|---|
| none | WAV | - | Uncompressed audio for highest quality |
| low | WebM | 96 kbps | Low compression, good quality |
| medium | WebM | 64 kbps | Balanced compression (default) |
| high | WebM | 32 kbps | High compression, smaller file size |
import React, { useState } from "react";
import {
PreviewVoiceNote,
VoiceRecorder,
RecordingStatus,
AudioSize,
} from "@ananay-nag/react-voice-recorder";
function App() {
const [audioData, setAudioData] = useState<{
blob: Blob;
url: string;
isRecording: boolean;
size?: number | 0;
} | null>(null);
const handleRecordedData = (
data: {
blob: Blob;
url: string;
type: string;
isRecording: boolean;
size?: number;
}
) => {
setAudioData(data);
// Now you can do whatever you want with the data:
// - Store it in state
// - Send it to a server
// - Process it further
// Example of sending to server:
// sendToServer(data.blob);
};
return (
<div className="App">
<h1>My Voice Recording App</h1>
<VoiceRecorder
onDataRecorded={handleRecordedData}
duration={10}
compressionLevel={"low"}
/>
<RecordingStatus isRecording={audioData?.isRecording ?? false} />
{audioData && (
<PreviewVoiceNote audioUrl={audioData?.url ?? null}></PreviewVoiceNote>
)}
{audioData && (
<div>
{audioData.size!= 0 && (
<p>
Size: <AudioSize size={audioData?.blob?.size ?? null} />
</p>
)}
</div>
)}
</div>
);
}
// Example function to send data to server
// function sendToServer(audioBlob: Blob) {
// const formData = new FormData();
// formData.append('audio', audioBlob, 'recording.wav');
// fetch('/api/upload-audio', {
// method: 'POST',
// body: formData
// })
// .then(response => response.json())
// .then(data => console.log('Success:', data))
// .catch(error => console.error('Error:', error));
// }
export default App;- Chrome 49+
- Firefox 53+
- Safari 11+
- Edge 79+
The component includes basic styling, but you can customize it by overriding the CSS classes:
/* Example custom styling */
.voice-recorder-container {
background-color: #f7f9fc;
border-radius: 8px;
padding: 20px;
}
.record-button {
font-weight: bold;
}
.audio-player {
width: 100%;
margin-top: 10px;
}ISC