Online Chord Pad with Drums — Play and Loop Chord Progressions in Your Browser

# What a chord pad is for

Most people who want to hear a chord progression are not trying to compose. They are trying to practise over one, or to find out what a progression they read about actually sounds like, or to keep a loop going while they work out a melody on top. A chord pad is the shortest path to that: sixteen buttons, every one of them a chord that fits, and a beat behind them.

The pads are not a chromatic chord picker. Pick a key and a mode, and the home row becomes the seven chords built on the notes of that scale, plus one borrowed chord too common to leave out. In a major key that is I ii iii IV V vi vii° and the flat-seventh chord that gives rock its modal cadence. In a minor key it is i ii° bIII iv v bVI bVII and the major V — the borrowed dominant that makes a minor key sound like it has come home.

The eight pads underneath are the colour row, and they are where songs actually go once the diatonic seven start to feel small. Four are secondary dominants — the V chord of some other degree, borrowed to make that degree feel briefly like home. Four are modal interchange: chords lifted from the parallel mode. All sixteen still belong together, so there is still no wrong pad to press — the colour row just costs a little more tension.

And when the chord you want is not any of them, + ADD CHORD puts it on the grid: any of the twelve roots against twenty-three qualities, from a plain triad to a minor-major seventh. Those pads sit in their own group and behave like every other pad. The sixteen are the chords that fit; the ones you add are the chords you want.

# Why the same four chords keep turning up

The progression the internet calls the axis — I–V–vi–IV, or C–G–Am–F in the key of C — carries an implausible share of the pop canon. It works because of what the four chords share. C and Am differ by one note. F and Am differ by one note. C and F share a note, C and G share a note. The progression can wander a long way from home and still keep a common tone underfoot, so it never sounds like it has jumped. Rotate the same four chords to start somewhere else and you get the other three progressions everyone knows: vi–IV–I–V, IV–I–V–vi, V–vi–IV–I. That is why one chord pad covers so much ground. If you want the actual song list, the 4 Chord Song Player has a hundred of them.

# The progressions a record made this decade actually uses

The axis is still everywhere, but it stopped being the only answer some time around 2012. The preset menu is split into three groups for that reason: Classic, Modern and Club & electronic. The modern ones are worth knowing by name.

The royal road, IVmaj7–V7–iii7–vi7, is the backbone of J-pop, anime themes and most of the lo-fi that grew out of them. It moves the opposite way to the axis: it opens away from home on the IV and only lands on the relative minor, so it never quite resolves, which is exactly why it loops forever without tiring. Play it as plain triads and it is unremarkable — the sevenths are the whole character, so the preset switches them on for you.

Neo-soul, IVmaj7–III7–vi7–I7, is the one hip-hop has been sampling for thirty years. Two of its four chords are not in the key at all: the III7 is a secondary dominant aimed at the vi, and the I7 is a dominant seventh on the tonic pointing at the IV that comes back round. Both live on the colour row, which is what that row is for. The lo-fi turnaround, Imaj7–vi7–ii7–V7, is the jazz turnaround slowed to 76 BPM with swing on it.

On the darker side, drill uses i–V–bVI–iv — note the major V, borrowed from harmonic minor, which is what gives the loop its menace; the natural minor v would just sag. Indie minor falls i–bIII–bVII–bVI, a stepwise descent that does nothing clever and works every time. Bedroom pop is I–iii–vi–IV with add9s, because the ninth is what makes a guitar sound like a bedroom and not a stage. And the chromatic lift, I–III–IV–iv, ends on a borrowed minor iv — one note moving down a semitone, and the brightest progression on the page turns sad in a bar.

The club group is built differently on purpose. Tech house is only two bars, i–bVII, played as offbeat stabs: the loop is a groove, not a journey. Amapiano sits on i7–iv7–bVII–bIII with the bass off the beat, trance rocks i–bVII–bVI–bVII at 138, and synthwave takes the bVI–bVII–i cadence that every 80s film score ends on. These presets bring their tempo, kit, instrument and bass pattern with them, because the right chords at the wrong tempo are not the thing you were reaching for. The thirteen classics do not — they still change nothing but the chords, the drum pattern and the strum.

# Voice leading, and why block chords sound like a toy

Play C then Am then F as three root-position triads and it sounds mechanical, because every note in your hand jumps at once. A player does not do that. They keep whatever notes the two chords have in common where they are and move the rest the shortest distance available. That is voice leading, and it is most of the difference between a chord machine and a keyboard player.

This page does it for you. Every time a chord changes, it tries each inversion across three octaves and keeps the one whose notes sit closest to the notes that were already sounding, with a gentle pull back toward the middle of the register so nothing crawls off the end of the keyboard. You do not have to know it is happening; you just notice that the loop sounds like someone is playing it.

# The colour row

A secondary dominant is the trick behind almost every progression that sounds like it briefly changed key and came back. Take any chord in the key, work out what its own dominant would be, and play that first. In C major the ii chord is Dm, and the dominant of D is A major — a chord with a C♯ in it, nowhere near the key of C. Play A → Dm and the Dm lands like a tonic. The pads label these V/V, V/vi, V/ii and V/IV, read as "five of five", "five of six".

V/IV is the odd one. Its root is the tonic, so as a plain triad it would be an exact duplicate of pad 1 — the flat seventh is the entire chord. It is therefore always a dominant seventh, and it is the gospel and blues move that turns the tonic into a launchpad for the IV.

Modal interchange is the other four: borrowing from the parallel mode, the one with the same tonic and the opposite third. In a major key you get iv (the minor fourth — the single saddest chord available to a major key), bIII, bVI and bII, the Neapolitan. In a minor key you get the brightening ones instead: a major I (the Picardy third), a major IV, a Dorian ii and vi, plus the leading-tone vii° and V/bIII, the dominant that tonicises the relative major and is how a minor-key song reaches its bright section.

# Sevenths are not one thing

The 7th button does not add the same note everywhere, because a seventh is not the same chord everywhere. On the tonic of a major key it makes a major seventh. On the dominant it makes a dominant seventh, which is a different chord with a different job — it is the one that pulls back to the tonic. On the second degree it makes a minor seventh, and on the seventh degree a half-diminished. Turn the modifier on and play ii V I and you have the jazz cadence, spelled correctly, without knowing any of this.

The blues is the famous exception, and it gets its own switch. In a twelve-bar blues the I, the IV and the V are all dominant sevenths — C7, F7, G7 in the key of C. Played diatonically you would get Cmaj7 and Fmaj7, which is a lounge, not a blues. Loading the 12-bar preset turns BLUES 7ths on for you.

# The drum machine and the bass

The drum grid is sixteen steps of nine lanes, synthesised the same way an 808 or 909 does it: a pitch-dropping sine for the kick, filtered noise plus a tuned body for the snare, bandpassed noise bursts for hats and claps. Four kits, ten presets, and every step editable. Steps have three levels, because a hat pattern with no ghost notes sounds like a metronome.

The bass follows your chords automatically — you never program it. Pick a pattern and it works out the notes: root, root–fifth, an octave pump, an offbeat, or a walking line that uses each chord's own third, so it walks through a minor third over a minor chord. It is the layer that turns three chords into something that sounds like a band.

# Everything happens in the page

There are no samples and no audio files. Every sound here is built out of Web Audio oscillators and filters at the moment you hear it, which is why the page loads in one request and works on a plane. Nothing you play is sent anywhere, because there is nowhere to send it — there is no back end. The share link is not an upload either: the entire arrangement is encoded into the URL, so the link is the file.

How it compares