A free, no-signup browser drum machine that runs entirely client side, and that you can play live with a real electronic drum kit over USB. No samples, no downloads, no account.
Play it here: https://jennysdrumsteps.thatwebhostingguy.com/app/
Every drum is synthesized, not sampled
There are no audio files. Every voice (kick, snare, hats, toms, cymbals, a full Latin percussion set) is built from oscillators, noise, and envelopes through the Web Audio API at runtime. A kick is a pitch swept sine into a fast amplitude envelope. A snare is filtered noise plus a body tone. Cymbals are banks of inharmonic partials shaped with a long decay. Because it is all synthesis, the whole kit ships as code, loads instantly, and every hit can respond to velocity.
Timing comes from a lookahead scheduler
You cannot trust setTimeout for musical timing. The pattern player uses the well known lookahead pattern: a timer wakes up often, looks a short window into the future, and schedules every note that falls inside that window directly on the Web Audio clock. The audio clock is sample accurate, so the groove stays tight even when the main thread is busy. Open and closed hats share a choke group so a closed hat cuts an open one, the way a real hi hat does.
Plug in a real electronic kit with Web MIDI
This is my favorite part. Click Connect Drum Kit, allow MIDI access, and the site listens to your physical e kit. It maps the full General MIDI percussion range to the synthesized voices and passes velocity through, so soft ghost notes stay quiet and rim shots crack. The handler reads note on messages, treats note on with velocity zero as note off the way many kits send it, and accepts every channel so it just works.
Web MIDI is supported in Chrome and Edge on desktop and Chrome on Android. Safari and iOS do not implement it, so the app detects support on load and falls back cleanly to the on screen pads and the computer keyboard.
Accessible by design
The pads are real buttons with labels, the FAQ is native details and summary, and the whole thing works with zero framework and near zero blocking JavaScript. It is fast on a phone and usable from the keyboard.
If you have a drum kit gathering dust, plug it in and have fun: https://jennysdrumsteps.thatwebhostingguy.com/app/
I build web apps and engine optimization at ThatDevPro and ThatDeveloperGuy.
Top comments (0)