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

A free online chord pad with drums and bass

Most people who want to hear a chord progression are not trying to compose. They want to practise over one, hear what a progression they read about sounds like, or keep a loop going while they work out a melody on top. This online chord pad is the short path to that: sixteen pads that always fit your key, a drum machine, an automatic bass line and seventeen instruments. Write a progression, give it a verse and a chorus, and it loops itself while you play, sing or write over it. It is free, runs in your browser and needs no account.

How to use the chord pad

Press PLAY (or Space), then hit pads. The drums and bass start straight away and the chord you last pressed is the chord that plays. To build a loop that plays itself, click the first slot in The loop and hit the pads in the order you want. Each press drops that chord into the slot and moves the cursor along. Click a filled slot again to empty it; an empty slot keeps playing the chord before it. Normally a chord stops when you let go of the pad. With LATCH on it keeps sounding until you press another pad, which helps when your other hand is playing a melody. Press 0 or turn LATCH off to silence it.

Name your loop

Type a name of up to 24 characters in name your loop… and it replaces the big CHORD PAD letters at the top of the page with your song title in the same block-letter ASCII style (on wider screens). Letters, digits and a few punctuation marks are drawn. The name is saved with your loop and goes into the share link, both inside the saved arrangement and as a readable ?song= part of the address, so whoever opens the link sees which song it is.

Verse and chorus in one song

The Verse / Chorus switch at the top of the loop panel gives each section its own chord slots, chord modifiers, number of bars, BLUES 7ths setting and drum grid. The key, transpose, tempo, swing, instruments, your added chords and the mix are shared, so the two sections always sound like the same song. Playback, WAV and MIDI use the section on screen; switch to hear or export the other one. Both sections travel together in the share link and are kept in your browser between visits.

Sixteen pads that always fit your key

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 bVII, the major chord a whole tone below the tonic that rock and folk lean on for the Mixolydian cadence. In a minor key it is i ii° bIII iv v bVI bVII and the major V: natural minor's v is minor and resolves weakly, so raising its third, borrowed from harmonic minor, gives the pull back home that most minor-key songs use. Change the key and every pad relabels itself; the loop follows because the slots store the scale degree, not the chord name. That is also why transposing is instant and a preset sounds right in every key.

The roman numerals on each pad name the chord by its position in the key. I is built on the first note of the scale, V on the fifth. Capitals are major, lower case minor and a small circle means diminished. Because they describe the same progression in every key, books and forums write progressions this way. Chord names are spelled for the key: the fourth chord of F major is B♭, never A♯, and flat keys use flats while sharp keys use sharps, as in sheet music. Each pad also shows its job, in colour and in words: home, moves away, pulls home, borrowed or secondary V.

The colour row: secondary dominants and borrowed chords

The eight pads under the separator are where songs go once the diatonic seven start to feel small. They are outside the scale, but they all resolve back into the key, so there is still no wrong pad; the colour row just costs a little more tension.

• Secondary dominants. Take a chord in the key, work out what its own dominant would be, and play that first. In C major V is G, and the dominant of G is D major, a chord with an F♯ that is not in C at all. Play D then G and the G lands like a destination. The pads read V/V, V/vi, V/ii and V/IV: "five of five", "five of six".
• V/IV is always a seventh. Its root is the tonic, so as a plain triad it would be the same chord as pad 1. The flat seventh is the whole chord (C7 rather than C), it pulls to the IV, and it is the gospel and blues move that turns the tonic into a launchpad. The chord modifiers are ignored on this pad for the same reason.
• Modal interchange borrows from the parallel mode, the one with the same tonic and the opposite third. In a major key that is the minor iv (the saddest chord a major key has), bIII, bVI and bII, the Neapolitan.
• In a minor key the colour row brightens instead: V/V, the leading-tone vii°, V/bIII (the dominant that points at the relative major, and how a minor-key song reaches its bright section), a major I (the Picardy third), a major IV, a Dorian ii and vi, and bII.

Add any chord, even outside the key

When the chord you want is not on the grid, press + ADD CHORD and pick any of the twelve roots against any of twenty-three qualities, from a plain triad to a minor-major seventh, 6/9 or 7♯5. It appears in a "Your chords" group and behaves like any other pad. You can have eight at a time. The sixteen key pads are the chords that fit; the ones you add are the chords you want.

Want an A minor but there is no Am pad? Then your key does not contain one: Am is the vi of C major and the ii of G major, but not a chord of D or E major. Change the key, or add Am as your own pad. An added chord follows transpose but not the key, on purpose: you named a specific chord, so switching from C major to F major leaves it as you named it, while transpose means "play the whole arrangement higher", so everything moves together. The small numeral above an added pad does update with the key, so Am reads VI in C and V in D. Removing an added chord empties any bar that used it and renumbers the bars pointing at later added chords, so they keep playing the same chord.

Sevenths and the BLUES 7ths switch

The 7th modifier does not add the same note everywhere, because a seventh is a different chord on every degree. Stacking another scale note on each triad gives a major seventh on I and IV, a dominant seventh on V (the one that pulls back to the tonic), minor sevenths on ii, iii and vi, and a half-diminished on vii. Turn it on and play ii–V–I and you have the jazz cadence, spelled correctly. The blues is the famous exception: in a twelve-bar the I, IV and V are all dominant sevenths, C7, F7 and G7 in C. BLUES 7ths makes every 7th on a major chord a dominant seventh, and loading the 12-bar blues preset switches it on for you.

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 C, carries a huge share of pop. It works because the chords share notes: 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 from home and still keep a common tone underfoot. Rotate the same four chords and you get the other progressions everyone knows: vi–IV–I–V, IV–I–V–vi and V–vi–IV–I. For the song list, the 4 Chord Song Player has a hundred of them.

42 genre grooves and 13 classic progressions

The preset menu is sorted by genre. Every genre preset loads a whole arrangement at once: the chords, a drum groove written for that style, the right kit, a chord instrument and rhythm, a bass line, the tempo, the swing and a mix. They are all measured to the same loudness, so switching between them does not jump in volume.

• Pop & modern: modern pop (I–V–vi–IV with plucks and a syncopated bass), dance-pop/nu-disco, a piano ballad, the J-pop royal road, bedroom pop, indie minor, country and the chromatic lift.
• 70s · 80s · 90s: a Dorian disco vamp (i7–IV7) with octave bass and 16th guitar, 60s Motown, 80s synth-pop and an 80s power ballad on a LinnDrum-style kit with the big snare, synthwave, new jack swing, 90s eurodance, 90s boom bap and 90s alt rock.
• Dance & electronic: techno, deep house with ninth chords and house piano, tech house, an EDM drop, trance, UK garage 2-step, liquid drum & bass, future bass with supersaw chops, and amapiano.
• R&B, soul & hip-hop: modern R&B (IVmaj9–iii9–ii9–Imaj9), neo-soul, gospel (I–I7–IV–iv), a one-chord funk vamp with clavinet and slap bass, trap, drill and lo-fi hip-hop.
• Latin & world: reggaeton on the dembow, afrobeats, a salsa montuno over clave and tumbao bass, bossa nova and reggae one-drop.
• Classical & cinematic: a circle-of-fifths sequence in Alberti bass, Pachelbel's canon on harpsichord, a cinematic epic with toms and strings, and a film-score piano.

The thirteen classic progressions (the axis, 50s doo-wop, pop punk, Pachelbel, the 12-bar blues, ii–V–I, a ballad, rock bVII, reggae, Andalusian, minor pop, a sad descent and a folk loop) are there to learn from: they change only the chords, the drum pattern and the strum, and leave your sound alone.

Voice leading, done for you

Play C, Am and F as three root-position triads and it sounds mechanical, because every note jumps at once. A keyboard player keeps the notes two chords share where they are and moves the rest the shortest distance. That is voice leading. Every time a chord changes, the page tries each inversion across three octaves and keeps the one closest to the notes already sounding, with a gentle pull toward the middle of the keyboard. You do not control it; the loop just sounds like someone is playing it.

The drum machine, the bass and the sound

The drum grid has sixteen steps on eleven lanes (kick, snare, clap, closed and open hat, low and high tom, rim, crash, shaker and cowbell) and nine kits, from 808 and 909 to a LinnDrum-style 80s kit, a dry 70s disco kit, a trap kit and a dusty boom-bap kit, all synthesised rather than sampled, the way an 808 or 909 does it: a pitch-dropping oscillator for the kick, filtered noise plus a tuned triangle body for the snare, and short bursts of filtered noise for hats and claps. The 909 and acoustic kits build their hats from six square waves through a bandpass filter. Clicking a step cycles it through ghost, normal and accent before switching it off. Ghost notes stop a hat line sounding like a metronome, and an accented backbeat makes it feel like a drummer.

The bass reads the chords. Pick a pattern and it works out the notes for whatever chord is playing. The walking pattern uses each chord's own third, so it walks through a minor third over a minor chord and a major third over a major one. Choose "No bass" to play the bass part yourself.

Swing delays every second sixteenth so pairs of notes become long-short. At 0% the grid is straight; towards 55 to 66% it gets close to a shuffle. It moves the drums, the strumming and the bass together. The Space slider sends the chords and drums through a convolution reverb built from a synthesised small-room response: low is dry and close, higher sits the chords further back. A compressor and a soft-clip limiter on the master output round off the peaks when everything plays at once, so it does not clip harshly.

Share links, WAV and MIDI

COPY SHARE LINK packs the whole arrangement into the URL after the #: key, mode, transpose, tempo, swing, both the verse and the chorus with their chords and drum grids, your added chords, the instruments and patterns, every level and the song name. Nothing is stored anywhere; opening the link rebuilds it in the browser, so the link cannot expire.

WAV renders exactly what you hear, offline and faster than real time, at your browser's sample rate (usually 44.1 or 48 kHz), 16-bit stereo. Choose 1, 2, 4 or 8 repeats first. MIDI is a standard format-1 file with the tempo and three tracks: chords, bass, and drums on channel 10 with General MIDI drum notes. Every DAW opens it, and because MIDI carries notes rather than sound you can play it back with your own piano and drum sounds. Both files are written in the page, and both use the section on screen.

What you make is yours. Chord progressions are not copyrightable, the sounds are synthesised here, and you can use the exports in a track, a video or a lesson, commercially or not. Your current arrangement is also kept in your browser's local storage and comes back when you return on that browser; the share link is the portable copy that works on any device.

Fullscreen and phones

FULL (or F) strips the page back to the transport, the pads and the loop and lets the pads fill the screen. The drums keep playing; you just cannot edit them there. Press F or Esc to leave. On iPhone and iPad, where only videos can go truly fullscreen, it is a layout change and the browser bar stays visible. On a phone the pads sit in two columns sized for thumbs, and the drum grid scrolls sideways instead of shrinking. iOS makes no sound until you touch the page once; the first tap on PLAY does that.

Nothing is uploaded

There is no back end. Every chord, drum hit and both export formats are made by your own browser, with no samples or audio files to download, so once the page has loaded it keeps working offline. The only requests after load are the web font and a privacy-first analytics ping that counts the page view. It is free, with no ads, no sign-up and no limits; if it saved you time you can buy me a coffee.

Keyboard shortcuts

1–8 home row · Q–I colour row · Z–M and , your own chords · Space start and stop · L latch · 0 stop a latched chord · ← → transpose a semitone · F fullscreen · Esc leave fullscreen. Held keys do not repeat, so a held pad sustains instead of retriggering.

More music tools

The 4 Chord Song Player plays four chords with your hands through the webcam, with a hundred songs that use them. Drum Loop Studio is the full drum machine, and the live loop pedal records and overdubs your own playing. To play along with a whole song's chords, paste them into the chord backing track maker; for guitar and piano diagrams, use the chord chart generator.