Chord lab

A chord is a stack of thirds, and a progression is a path through chords in a key. Build any chord on a keyboard and a staff, listen to it as a block or an arpeggio, and then string chords together with Roman numerals, hear the four cadences, and watch how the voices move from one chord to the next. A chromagram at the bottom shows the pitch-class energy of what is sounding, and a key estimate guesses the key from the chords you have played.

Chord builder

The staff shows the chord as a stack of thirds in root position, which is how it is named. The keyboard shows what actually sounds: an inversion puts a chord tone other than the root in the bass (the bass key is orange), a close voicing packs the notes tightly, an open voicing lifts every second note an octave, and a drop-2 voicing takes the second note from the top and drops it an octave, as a jazz pianist or guitarist would.
Chromagram and key estimate

Play something to see the chromagram.

The tall bars are the energy per pitch class in the sound right now, measured from the audio with a spectrum analyser and folded into one octave; the paler bars behind them are the same energy remembered over the last few chords. The key estimate correlates that memory with a major key profile (after Krumhansl) for each of the 12 tonics and names the best match, with the recent chords read as Roman numerals in that key. The harmonics of each tone leak into other pitch classes, mostly the fifth, which is also what a key-finding algorithm has to cope with on a real recording.

Things to try: play the four triads on C one after the other and hear the difference between major, minor, diminished, and augmented. Set a progression that ends on vi instead of I and notice the deceptive cadence. Switch voice leading off and listen to the leaps. Build C13 and change the quality down through C11, C9, and C7 to hear each added third disappear until the plain dominant seventh is back.