Drumhaus is a drum machine for the browser. It's sample-based, performant, and built with a powerful sequencer for sketching ideas quickly and performing full patterns live. Inspired by classic Roland hardware and the Bauhaus school, it was designed to feel more like a physical product than software. Share beats as compressed URLs, export to WAV, or install it as an offline PWA.
Sequencer
- 8 voices, 16 steps, four chainable A/B/C/D variations up to 8 bars
- Per-step velocity, flam, ratchet, and accent controls
- Per-voice timing nudge for humanized grooves
- Click-drag step entry, copy/paste/clear per voice or variation
Sound
- Per-voice decay envelope, HP/LP filters, pan, volume, semitone pitch, mute/solo
- Master bus: HP/LP filters, saturation, phaser, reverb, compressor
- 10 curated sample kits with instant hot-swap
Workflow
- Presets: save locally, export as
.dhfiles, or share as compressed URLs - WAV export via offline rendering with configurable bar length and FX tail
- Keyboard shortcuts, responsive layout scaling, night mode
The audio engine is built on Tone.js with a custom sequencing layer that precomputes patterns on every update, keeping playback tight and timing-consistent between live and offline rendering. Preset sharing uses a custom serialization pipeline with bit-packing, pako compression, and base64url encoding to compress full rig snapshots into ~200 character URL parameters. A centralized animation clock synchronizes all visual feedback (step indicators, gain meters, frequency analysis, intro lightshow) to a shared frame timeline, bypassing React renders in favor of direct DOM writes via data attributes.
- A Drum Machine for the Browser — the original build
- Announcing Drumhaus v1 — the rewrite
© 2023-present Max Fung. Licensed under CC BY-NC-SA 4.0.
If this project brings you joy, consider buying me a coffee.