A modern, feature-rich React voice recorder component with TypeScript support, pause/resume, download, and more
npm install simplevoicerecorderreactA modern, feature-rich React voice recorder component with TypeScript support, pause/resume functionality, download capability, and comprehensive accessibility features.
- π€ High-quality audio recording using MediaRecorder API
- βΈοΈ Pause/Resume recording functionality
- π₯ Download recorded audio files
- π¨ Modern UI with SCSS styling
- βΏ Accessibility features (ARIA labels, keyboard navigation)
- π± Responsive design for mobile and desktop
- π§ TypeScript support with full type definitions
- β±οΈ Timer with hours, minutes, and seconds display
- π« Error handling with user-friendly messages
- ποΈ Customizable props for flexible usage
- π§Ή Memory management with proper cleanup
``bash`
npm install simplevoicerecorderreact
or
`bash`
yarn add simplevoicerecorderreact
`tsx
import React from 'react';
import { Recorder } from 'simplevoicerecorderreact';
import 'simplevoicerecorderreact/dist/index.css';
const App = () => {
const handleAudioUrl = (url: string | null) => {
console.log('Audio URL:', url);
};
const handleStatus = (status: 'idle' | 'recording' | 'paused' | 'completed' | 'error') => {
console.log('Recording status:', status);
};
return (
status={handleStatus}
title="My Voice Recorder"
/>
);
};
export default App;
`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| blobUrl | (url: string \| null) => void | undefined | Callback function that receives the audio URL when recording is completed |showAudioPlayUI
| | boolean | true | Show/hide the audio player after recording |title
| | string | '' | Title displayed above the recorder |className
| | string | '' | Additional CSS class names |hideAudioTitle
| | boolean | false | Hide the title header |status
| | (status: 'idle' \| 'recording' \| 'paused' \| 'completed' \| 'error') => void | undefined | Callback function for recording status changes |onRecordingStart
| | () => void | undefined | Callback fired when recording starts |onRecordingStop
| | () => void | undefined | Callback fired when recording stops |onRecordingPause
| | () => void | undefined | Callback fired when recording is paused |onRecordingResume
| | () => void | undefined | Callback fired when recording resumes |maxDuration
| | number | 0 | Maximum recording duration in seconds (0 = unlimited) |showDownloadButton
| | boolean | true | Show/hide the download button |showPauseButton
| | boolean | true | Show/hide the pause/resume button |showClearButton
| | boolean | true | Show/hide the clear button |downloadFileName
| | string | 'recording' | Default filename for downloaded audio |disabled
| | boolean | false | Disable all recorder controls |
`tsx
import { Recorder } from 'simplevoicerecorderreact';
import 'simplevoicerecorderreact/dist/index.css';
function App() {
return
}
`
`tsx
import { Recorder } from 'simplevoicerecorderreact';
import 'simplevoicerecorderreact/dist/index.css';
function App() {
const handleAudioUrl = (url: string | null) => {
if (url) {
console.log('Recording completed:', url);
// Do something with the audio URL
}
};
const handleStatus = (status: string) => {
console.log('Status:', status);
};
return (
status={handleStatus}
title="Voice Recorder"
/>
);
}
`
`tsx
import { Recorder } from 'simplevoicerecorderreact';
import 'simplevoicerecorderreact/dist/index.css';
import './CustomStyles.scss';
function App() {
return (
title="Custom Styled Recorder"
/>
);
}
`
`tsx
import { Recorder } from 'simplevoicerecorderreact';
import 'simplevoicerecorderreact/dist/index.css';
function App() {
return (
title="60 Second Recorder"
/>
);
}
`
`tsx
import { Recorder } from 'simplevoicerecorderreact';
import 'simplevoicerecorderreact/dist/index.css';
function App() {
const handleAudioUrl = (url: string | null) => {
// Handle audio URL programmatically
if (url) {
// Upload to server, etc.
}
};
return (
blobUrl={handleAudioUrl}
title="Minimal Recorder"
/>
);
}
`
For more control, you can use the useRecorder hook directly:
`tsx
import { useRecorder } from 'simplevoicerecorderreact';
import 'simplevoicerecorderreact/dist/index.css';
function CustomRecorder() {
const {
audioURL,
isRecording,
isPaused,
startRecording,
stopRecording,
pauseRecording,
resumeRecording,
clearRecording,
error,
audioBlob,
} = useRecorder();
return (
$3
`tsx
// pages/index.tsx or app/page.tsx
import { Recorder } from 'simplevoicerecorderreact';
import 'simplevoicerecorderreact/dist/index.css';export default function Home() {
return (
Voice Recorder
);
}
`Browser Support
This component uses the MediaRecorder API, which is supported in:
- Chrome 47+
- Firefox 25+
- Edge 79+
- Safari 14.1+
- Opera 36+
For older browsers, you may need polyfills.
TypeScript
Full TypeScript support is included. Import types as needed:
`tsx
import { Recorder, RecorderProps, UseRecorderReturn } from 'simplevoicerecorderreact';
`Styling
Important: You must import the CSS file for the component to display correctly:
`tsx
import 'simplevoicerecorderreact/dist/index.css';
`The component uses SCSS modules. You can override styles by:
1. Passing a
className prop
2. Using CSS specificity to override default styles
3. Importing the styles module and extending itAccessibility
The component includes:
- ARIA labels and roles
- Keyboard navigation support
- Screen reader announcements
- Focus management
- Semantic HTML
Error Handling
The component handles various error scenarios:
- Microphone permission denied
- Microphone not available
- MediaRecorder API not supported
- Recording errors
Errors are displayed to the user and can be accessed via the
error` property when using the hook directly.- Proper cleanup of MediaRecorder and MediaStream
- Memory management with URL.revokeObjectURL
- Efficient timer implementation using setInterval
- No memory leaks
Contributions are welcome! Please feel free to submit a Pull Request.
ISC
Ahmad Faraz
- β¨ Added TypeScript support
- β¨ Added pause/resume functionality
- β¨ Added download button
- β¨ Added clear button
- β¨ Improved error handling
- β¨ Enhanced accessibility features
- β¨ Better timer implementation
- β¨ SCSS styling
- β¨ Memory leak fixes
- β¨ Better cleanup on unmount
- β¨ More customization options
- Basic recording functionality
- Audio playback UI
- Timer display