A browser-based drum sequencer/loop machine built with vanilla JavaScript and the Web Audio API.
- 16-step sequencer with 3 instrument tracks (hi-hat, snare, kick)
- Real-time playback with visual step indicator
- Per-instrument effects: Reverb and Delay with adjustable levels (0-10)
- URL state persistence: Share patterns via URL
- JSON editor sidebar: View and edit sequencer state directly as JSON
- Reset functionality: Clear all patterns and effects with confirmation modal
- A modern web browser with Web Audio API support
- A local web server (for loading audio samples)
- Clone the repository
- Serve the directory with any static file server:
npx serve . - Open
http://localhost:3000in your browser
The project uses 808 drum samples located in the 808 Samples/ directory:
hi hat (30).wavsnare.wavkick.wav
- Click START/STOP to begin/stop playback
- Click on sequencer pads to toggle notes on/off
- Adjust REVERB and DELAY sliders for each instrument
- Use the sidebar toggle to open the JSON editor for direct state manipulation
- Click RESET to clear all patterns (requires confirmation)
The sequencer state is encoded in the URL using a compact format:
sparameter:{notes_hex}_{sliders_chars}- Notes: 4-character hex per instrument (16 steps as binary)
- Sliders: 2 characters per instrument (reverb + delay, 0-9 or 'a' for 10)
sidebarparameter:1if sidebar is visible
loop-machine/
├── index.html # Main HTML structure
├── script.js # Core application logic
├── style.css # Styling
├── 808 Samples/ # Drum audio samples
└── src/
└── utils/ # Utility functions
- Vanilla JavaScript (ES6+)
- Web Audio API for audio playback and effects
- CSS Grid for layout
- No external dependencies
See CONTRIBUTING.md for guidelines. For bugs or feature requests, please open an issue.
MIT