A powerful, embeddable audio recording widget with cross-browser compatibility
npm install audio-recorder-webA powerful, embeddable audio recording widget with cross-browser compatibility including legacy Internet Explorer support.
- 🎙️ High Quality Recording - Records audio using MediaRecorder API with automatic codec selection
- 🌐 Cross-Browser Support - Works on Chrome, Firefox, Safari, Edge, and IE 9+ (via Flash fallback)
- 📊 Live Visualization - Real-time audio waveform visualization using Web Audio API
- 🎨 Themeable - Dark and light themes included, easy to customize
- 📦 Easy Integration - Simple drop-in plugin with minimal configuration
- ⬇️ Export Options - Download recordings as WAV or WebM files
| Browser | Version | Method |
|---------|---------|--------|
| Chrome | 47+ | MediaRecorder API |
| Firefox | 25+ | MediaRecorder API |
| Safari | 11+ | MediaRecorder API |
| Edge | 79+ | MediaRecorder API |
| Opera | 36+ | MediaRecorder API |
| IE | 9-11 | Flash Fallback |
| IE | 6-8 | Flash Fallback (with polyfills) |
``bash`
npm install audio-recorder-web
ES Modules (React, Vue, Angular, etc.):
`javascript
import AudioRecorder from 'audio-recorder-web';
import 'audio-recorder-web/dist/audio-recorder.css';
const recorder = new AudioRecorder({
container: '#my-recorder',
theme: 'dark'
});
`
CommonJS:
`javascript`
const AudioRecorder = require('audio-recorder-web');
Download the files and include them in your project:
`html
`
unpkg CDN:
`html`
jsDelivr CDN:
`html`
1. Add a container element to your HTML:
`html`
2. Initialize the recorder:
`javascript`
var recorder = new AudioRecorder({
container: '#my-recorder',
theme: 'dark'
});
That's it! The recorder will automatically detect the best recording method for the current browser.
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| container | String/Element | required | CSS selector or DOM element |theme
| | String | 'dark' | Theme: 'dark' or 'light' |variant
| | String | 'standard' | UI variant: 'standard', 'compact', 'minimal', or 'mini' |maxDuration
| | Number | 300 | Maximum recording duration in seconds |sampleRate
| | Number | 44100 | Audio sample rate |format
| | String | 'wav' | Output format |flashPath
| | String | 'flash/recorder.swf' | Path to Flash fallback SWF |
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| showPause | Boolean | true | Show/hide the pause button |showPlay
| | Boolean | true | Show/hide the play button |showDownload
| | Boolean | true | Show/hide the download button |showTimer
| | Boolean | true | Show/hide the timer display |showStatus
| | Boolean | true | Show/hide the status text |
| Callback | Parameters | Description |
|----------|------------|-------------|
| onStart | - | Called when recording starts |onStop
| | - | Called when recording stops |onPause
| | - | Called when recording is paused |onResume
| | - | Called when recording resumes |onData
| | { blob, url, duration } | Called when recording data is ready |onError
| | message | Called when an error occurs |onPermissionGranted
| | - | Called when microphone access is granted |onPermissionDenied
| | - | Called when microphone access is denied |
`javascript`
recorder.start(); // Start recording
recorder.stop(); // Stop recording
recorder.pause(); // Pause recording
recorder.resume(); // Resume recording
`javascript`
recorder.play(); // Play the recording
`javascript`
recorder.download(); // Download with auto-generated filename
recorder.download('my-recording'); // Download with custom filename
`javascript`
var blob = recorder.getBlob(); // Get the recorded blob
var url = recorder.getUrl(); // Get the blob URL
var duration = recorder.getDuration(); // Get duration in seconds
`javascript`
recorder.reset(); // Reset the recorder
recorder.destroy(); // Clean up and remove
`javascript`
AudioRecorder.isSupported(); // Check if recording is supported
AudioRecorder.getCapabilities(); // Get detailed capability info
`html`
Perfect for embedding in forms or tight spaces:
`javascript`
var recorder = new AudioRecorder({
container: '#recorder',
variant: 'mini',
theme: 'dark',
maxDuration: 60
});
A single button that handles everything - click to record, click again to stop. Shows timer and volume level inside the button:
`javascript`
var recorder = new AudioRecorder({
container: '#recorder',
variant: 'button',
theme: 'dark',
maxDuration: 60,
onData: function(data) {
console.log('Recording complete!', data.blob);
}
});
Hide all buttons except record and stop for simple voice capture:
`javascript`
var recorder = new AudioRecorder({
container: '#recorder',
variant: 'mini',
showPause: false,
showPlay: false,
showDownload: false,
showTimer: false
});
`javascript`
var recorder = new AudioRecorder({
container: '#recorder',
variant: 'compact',
showDownload: false,
onData: function(data) {
uploadToServer(data.blob);
}
});
You can customize the appearance using CSS variables:
`css`
.ar-recorder {
--ar-bg-primary: #1a1a2e;
--ar-bg-secondary: #16213e;
--ar-text-primary: #ffffff;
--ar-text-secondary: #a0a0b0;
--ar-accent: #ff6b6b;
--ar-success: #48dbfb;
--ar-warning: #feca57;
--ar-border: #2d2d44;
--ar-radius: 12px;
}
Add these classes to the recorder container for different sizes:
`html
Flash Fallback (Legacy IE)
For Internet Explorer 9-11 and older browsers, the plugin uses a Flash fallback.
$3
1. Compile the Flash source (
) to flash/recorder.swf
2. Place in your project
3. Set the flashPath option:`javascript
var recorder = new AudioRecorder({
container: '#recorder',
flashPath: '/path/to/recorder.swf'
});
`$3
You'll need Adobe Animate or Flash Professional CS6+ to compile the ActionScript file:
1. Create a new ActionScript 3.0 project
2. Import
3. Set the document class to
4. Publish as Security Notes
- The plugin requires HTTPS in production for microphone access (except localhost)
- Flash fallback requires proper crossdomain.xml configuration for cross-origin usage
- Always handle the
MIT License - feel free to use in personal and commercial projects.
Contributions are welcome! Please feel free to submit a Pull Request.