Drum Machine
An interactive drum sequencer built with the Web Audio API. Create beats, adjust pitch, load custom samples, and save your patterns.
🎛️ Features: Sample-accurate timing, custom sample loading, pitch control (±12 semitones), pattern saving, 8-track sequencer, per-track effects
⚠️ Active Development Notice
This drum machine is currently under active construction with new features being added. Mobile/smartphone support is coming soon but not yet optimized. For the best experience, please use a desktop or laptop computer.
Opens in full-screen mode for best experience · Desktop recommended
How to Use
🎵 Basic Controls
- Click cells to add/remove drum hits
- Play/Stop to control playback
- BPM slider adjusts tempo (30-240 BPM)
- Sequence length from 4 to 64 steps
🎚️ Advanced Features
- Volume sliders per track
- Pitch control ±12 semitones per drum
- Fine tuning ±100 cents (1 semitone)
- Custom samples load your own sounds
💾 Pattern Management
- Name your beat in the text field
- Save stores pattern to browser
- Load from dropdown menu
- Delete removes saved patterns
🔧 Technical Details
- Web Audio API for sample-accurate timing
- MVC architecture clean separation
- No dependencies pure JavaScript
- Open source on GitHub
About This Project
This drum machine was built through a systematic development process with continuous improvements:
- Phase 1: Implemented AudioScheduler with Web Audio API for <2ms timing accuracy
- Phase 2: Refactored to MVC architecture, removed security vulnerabilities
- Phase 3: Native Web Audio API implementation, removed 180KB Howler.js dependency
- Phase 4: Added custom sample loading and pitch control capabilities
- Latest: Per-track effects (filter, delay, reverb) with full persistence - each drum can have independent audio processing!
The result is a lightweight, performant drum sequencer with professional-grade timing, extensive customization options, and studio-quality effects processing.
Coming Soon: Mobile optimization, MIDI support, and additional effect types.