Voice Recorder Module

A reusable, feature-rich voice recording solution with multiple storage strategies, real-time visualization, and flexible configuration. Perfect for flashcards, music snippets, voice memos, and more.

Flexible Recording

Record from 1 second to 10 minutes with pause/resume support and real-time visualization.

Multiple Storage Options

Choose from localStorage, IndexedDB, or server upload based on your needs.

Easy Integration

Plain JavaScript module that works in any project - no framework dependencies.

📝 Quick Voice Memo

Perfect for short notes and reminders. Uses localStorage for instant access (max ~5MB).

🎓 Flashcard Audio Recorder

Record pronunciation for language learning flashcards. Uses IndexedDB for storing multiple recordings without size limits.

🎵 Music Snippet Recorder

Capture musical ideas on the fly. Longer duration (up to 5 minutes). Example uses IndexedDB (server upload can be configured).

💻 Quick Start

// Import the UI component
import { VoiceRecorderUI } from './components/VoiceRecorderUI.js';

// Initialize with options
const recorder = new VoiceRecorderUI({
  container: document.getElementById('my-recorder'),
  storageType: 'indexeddb', // or 'localstorage' or 'server'
  maxDuration: 60, // seconds
  showVisualizer: true,
  autoSave: true,
  onSave: (data) => {
    console.log('Recording saved:', data);
  }
});

// That's it! The UI handles everything else.

📦 Modules Included:

  • • VoiceRecorder.js - Core recording logic
  • • AudioStorage.js - Multi-strategy storage
  • • VoiceRecorderUI.js - Complete UI component

🎨 Features:

  • ✓ Configurable duration (1s - 10min)
  • ✓ Real-time waveform visualization
  • ✓ Pause/resume support
  • ✓ Multiple storage strategies
  • ✓ Download recordings
  • ✓ Dark mode support

💾 Saved Recordings

Loading recordings...

⚠️ Browser Requirements

This module requires modern browser features: MediaRecorder API, Web Audio API, and getUserMedia. Works best in Chrome, Firefox, Edge, and Safari (iOS 14.3+). HTTPS is required for microphone access (except on localhost).