A 16-step drum machine with three melodic tracks that runs entirely in your browser. Everything is synthesized with the Web Audio API, so there are no sample files to load.

How it works

Pick a preset, from rock, disco and hip-hop to bossa nova and son clave, and press Play. Each preset loads the drum set it was written for; the Drum set menu next to Clear swaps the set under whatever pattern you have, since the rows play the same roles in both. Click a cell to cycle its strength: off, quiet (light blue), normal (blue), loud (orange), and back to off. Each channel's drop-down lets you swap in any drum, and the channels a preset doesn't use stay free for layering.

Every row also has a Euclidean rhythm generator. Steps sets the row's length, Hits are spread as evenly as possible over those steps, and Rotate shifts the start. The circle shows the row as it really is (step 1 at the top, going clockwise, with the hits joined into a shape), so it follows your hand edits too. Rows can have different lengths, so they drift against each other.

Many presets include optional layers that start muted: for example a clap doubling the snare, a tambourine, a crash on the first beat, or bongos over a clave. A muted row is dimmed, so it is easy to see which ones they are; press its M button to bring a layer in, or mute a regular row to hear the groove without it. While the music plays, M waits for the row's next cycle, like 1×: the button changes at once and blinks until the change happens (click again to cancel). It's an easy way to try out arrangements. The 1× button next to M plays a channel exactly once, from the start of its next cycle, and then mutes it again: set a spare channel to a fill, leave it muted, and fire it whenever you like.

The tabs above the grid switch between Bass, Chords, Lead and Drums, and all four play together. Each tab heading is a small control panel for its part, so you can mix without leaving the tab you are editing: a dot after the name means it holds something; the speaker mutes or unmutes it (red and crossed out while muted; while the music plays, a track's mute waits for the next bar and the icon blinks until it happens); the 1× plays it once from the start of the next bar and then mutes it again, handy for a fill or a lead line you want to drop in once; the slider sets its level; and the circle shows what it is playing (below). Clicking anywhere on a heading opens that tab. On Drums, the speaker and 1× act on the whole drum set at once (one bar is the longest row) without changing the rows' own M and 1× settings, and the slider sets the level of the whole set on top of each drum's own Level; the Volume at the top still controls everything.

The circle in each tab heading shows what that part is playing, so all four can be watched at once. The Bass, Chords and Lead circles show one step at a time as a circle of notes: the twelve note names around a ring (C at the top, a semitone per place, going clockwise), with the notes that track's eight rows can play drawn solid and the others faint. It shows what you hear at that step: notes struck on it are solid, and notes still ringing from an earlier step (a medium or long cell carries on into the next steps, and round the end of the loop) are paler. Everything sounding is joined into a polygon for a chord, so a major and a minor chord have different shapes. While the music plays it follows the playhead; when stopped it shows the last cell you clicked on that track, and the caption underneath gives the step number and, on a second line, its notes and the ones held over, for example “B (C held)”. A muted track is silent, so its circle is empty and dimmed and the caption says “muted”. The Drums circle is the master: the whole drum set round one ring, step 1 at the top, with a small ring for a step where nothing plays, a dot for one drum and a polygon with a corner per drum where several hit together (muted rows do not count). Behind the dots, each sounding drum's hits are also joined into its own translucent shape (hover one for the drum's name), so you can see where rhythms line up or interlock. Each channel has one color, shared by its own circle in the Drums tab and by its shape and single-drum dots here. Rows of different lengths are shown over the length at which the whole pattern repeats.

In a melodic tab each row is one note, and its drop-down picks which (C major to start with). A cell is a note, and clicking it cycles its length: off, short, medium, long. Cells in one column sound together, so a chord is a column. The Steps field at the right of the first row sets the track's length, like Steps on a drum row. Clear empties only the tab you are on. Next to Clear, a Sound menu picks the instrument for the track, the melodic counterpart of the drum set: four sounds each (Saw, Square, Sub and Pluck bass; Saw Pad, Organ, Soft Pad and Stab chords; Square + Saw, Square, Saw and Triangle leads), and the notes stay the same. The Key (a root note with its octave, such as A2 or C3) and Scale menus (major, the minors and modes, pentatonics, blues, whole tone) move the rows into another key or mode and keep a loaded pattern's melody, so you can hear the same riff in minor or in D; after a preset loads, the menus show the key and scale it is written in, and you can still choose any notes by hand.

The Preset menu follows the tab: on Drums it lists the drum presets, and on Bass, Chords and Lead it lists that track's presets (bass lines, chord progressions and lead runs), so loading one never touches the other tabs. They are written in C major or A minor, the same notes, so any combination fits together. A preset loads onto a clean scale: the eight rows are consecutive notes of the scale it is written in, the tonic at the bottom and its octave at the top, with the pattern placed on them, so an octave jump goes between the bottom and top rows. Most are 16 steps. A few are 32 steps, two bars, such as the slow chord progressions. The ones marked 12 steps are for the 12-step drum presets: Waltz is 3/4, and Blues Shuffle and Jazz Swing are a triplet grid, where a 16-step line would not line up. A melodic track can be longer than the 16 columns on screen: set Steps above 16 (up to 64, four bars) and a Bank switch (one button per 16 steps) appears at the right of the tabs. While the music plays the shown bank follows the playhead, switching back and forth; turn Follow off to stay on one bank and edit it, and a yellow mark under a bank button shows where the playhead is. A longer track plays against the 16-step drum loop, one drum bar per 16 steps, so a 64-step track covers four drum bars per round. Setting Steps to 12 or 8 works the same way as on a drum row.

Below the grid, Drum settings lets you tune the eight drums on the channels, one row each (the row follows the channel when you change its drum): pitch, decay, tone and level. Each drum keeps its own settings, remembered in this browser, even while it is not on a channel. If a MIDI drum module or synth is connected, click Connect MIDI (it becomes Rescan MIDI: click it again after plugging something in, and it says how many outputs it found), choose the device as the output and the drums play on that instead (General MIDI percussion, channel 10). Choosing an output also puts Bass, Chords and Lead on it, on channels 1, 2 and 3 (the drums use channel 10): a MIDI menu appears in the Preset row of each melodic tab (Built-in synth, or channel 1 to 16), and a track you set back to Built-in synth stays on the built-in synth. On a MIDI track the Sound menu becomes an Instrument menu with the 128 General MIDI instruments (defaults Synth Bass 1, Pad 2 warm and Lead 1 square); picking one sends a program change on the track's channel and plays a test note, and the programs are sent again at every Play. Each cell sends a note-on, held for the cell's length (short, medium or long), and the track's level sets the velocity; Stop sends all-notes-off so nothing hangs. The same “Also play internal synth” switch and Device latency setting apply to the notes as to the drums. A device that is not General MIDI will use its own sound for each program number.

Drum settings

Fine-tune the eight drums on the channels, one row each (the row follows the channel when you change its drum). Settings belong to the drum, so they follow it to whichever channel you assign it to, and every drum keeps its own even while it is not on a channel. Tune, Decay and Tone shape the built-in synth; Level also scales the velocity sent to a MIDI device. The MIDI note is what a connected device plays for the drum: each drum starts on its General MIDI percussion note (the instrument's name is shown next to the field), and you can type any other note to match your own synth's kit. Your settings are remembered in this browser.

This page was created with Claude Code.