Pulse Grid Rytm — A Drum Machine in a Single HTML File

I’ve been messing around with the idea of a drum machine that lives in a single HTML file: no build step, no samples to download, no server, nothing to install. Every sound is synthesized on the fly with the Web Audio API, and the whole thing weighs less than a JPEG. This one was built with Claude, working from a description of how I wanted a hardware-style groovebox to feel in the browser.

Press play, or hit Space, and start toggling steps.

What it does

The layout borrows from the Elektron Rytm: a step grid on top, a bank of twelve pads and a page of encoders underneath.

• 16-step grid, up to 12 tracks — click a step to toggle it. Select a run of steps and use the arrow keys to shift them left and right or transpose them up and down.
• Pads with five modes — 1 to 5 switch between trig, mute, chromatic, scene and performance modes. The pads sit on Q W E R / A S D F / Z X C V, so you can finger drum from the keyboard.
• Parameter locks — hold a step and turn an encoder to lock that value to that step only. Pitch, decay, tone, drive, level, pan, delay and reverb are all lockable.
• Performance macros — fill, retrigger, reverse, half time and double time, all momentary. Hold the key, let go, and the pattern snaps back.
• Tempo, swing and density — density scales the whole pattern up or down, which is a quick way to get from a sparse intro to a busy peak without redrawing anything.
• Sound sets — eight kits, from Boom and Break to Cavern and Acid, that swap the sounds and tuning without touching the beat. Four user slots save your own.
• Patterns in the URL — eight pattern slots, and the whole state is encoded into the page link. Copy it, paste it somewhere, and the beat comes back. Chain slots with a sequence like AAAB.
• WAV export — render one to sixteen bars, or the whole sequence, to a WAV file using an offline audio context.
• Visualizer — an oscilloscope behind the grid, with rings, bars, radial and tunnel modes on Tab.

Why a single file

Partly because it’s a fun constraint, and partly because it’s the most durable way to ship something small. A file like this will still open in twenty years. It can be emailed, dropped on any static host, or opened straight from a USB stick. The embed above is the same file served from this site, sitting in an iframe, and the full screen link opens it on its own.

If you make something you like, copy the link and send it to me.