Chord Progression Builder
I’ve built an interactive chord progression builder and sequencer that runs entirely in the browser. Choose from 39 chord qualities across all 12 root notes, then arrange them into progressions with drag-to-reorder.
Features
- Nine smart matching modes — including common-tone, circle of fourths/fifths, secondary dominants, tritone substitution, and modal interchange — help you discover harmonic connections between chords.
- Play back your progressions as full chords or ascending/descending arpeggios, with a tap-tempo metronome and a step sequencer for fine-grained rhythm control.
- Real-time spectrum and waveform visualizations respond to the audio, and eight color themes let you customize the look. (not implemented)
- Progressions are saved to your browser so you can pick up where you left off.
- Built with vanilla JavaScript and the Web Audio API — no frameworks or dependencies.
- The entire app was built collaboratively with Claude (Anthropic’s AI assistant) using Claude Code, a CLI tool that works directly in the terminal.
- I described the features I wanted — chord matching modes, arpeggio playback, the step sequencer, color themes — and Claude wrote the implementation while I directed the design and tested in the browser.
- Every commit in the project is co-authored between us.
- It’s a good example of how AI pair programming can work: I brought the music theory knowledge and UX opinions, Claude handled the boilerplate and Web Audio API wiring.