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.

# 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