05

Prototype 2025: Chord Progression Generator

← All projects
Prototype 2025: Chord Progression Generator

The more you know, the less you diversify.

A study in automation sitting halfway between music theory and creative coding. The starting point was a simple question: how far can you take chord generation inside a web browser? The answer turned into a React app that generates harmonic progressions from a database of 50 songs, plays them back as strummed electric piano, highlights the active notes on a 4-octave keyboard, and exports the whole run automatically — 50 chord variants rendered and packaged without touching a single one by hand.

The project is equally interesting to musicians looking for harmonic ideas they wouldn't normally reach for, and to developers curious about combining browser audio with a real production pipeline. The final output was finished in Logic Pro for sound treatment and After Effects for visual polish, with batch exports tying the two ends together.

What started as a single question became a complete system. The deeper it went into one narrow territory — harmony, voicing, automation — the more useful it became. That's not a coincidence.

Music Theory Engine

The song database stores 50 popular songs as JavaScript objects — title, artist, tonic, scale type, Roman numeral degrees, genre style, voicing mode, and tempo. From those inputs, chordGenerator.js derives every chord voicing at runtime using diatonic scale logic. Each chord is voiced as exactly 5 notes: bass root an octave below, root, 3rd, 5th, and an extension. Triad quality (major, minor, diminished) follows the scale; the extension (7th or 9th) is determined by the voicing mode assigned to the song.

Four voicing modes shape the harmonic color: pop uses diatonic 7ths only; soul adds 9ths on I and IV; jazz targets 9ths on ii and V; electro applies add9 color uniformly across all chords. Octaves are clamped to a C5 ceiling to keep voicings in a playable register.

Playback and MIDI

Audio runs through soundfont-player using the General MIDI electric piano preset. The strum effect fires the bass note first, then spreads the upper 4 notes over 250ms — even and odd chords alternate direction for natural variation. Each chord sustains for 2 beats at 30 BPM, slow enough to hear every voice resolve. The engine simultaneously sends Web MIDI output, tested against Logic Pro's Virtual Input, so the session can capture and process the playback directly.

The active chord row highlights in real-time as playback advances, and the piano keyboard updates per note event — the display functions as both a practice aid and a visual record of what was just played.

Automation Pipeline

The 50-variant run was generated fully automatically: the app cycles through every song entry, captures the output, and hands it to the post-production chain. Logic Pro handled sound processing per variant; After Effects handled visual framing and batch export. The workflow is repeatable — updating the song database and rerunning the pipeline regenerates the full set with no manual intervention per item.

Progression Patterns

The most common patterns in the database map to recognizable harmonic regions: I–V–vi–IV (modern pop), i–VII–VI–VII (dark synth), I–vi–ii–V (jazz-influenced), i–VI–III–VII (soul/electro), and I–IV–V (gospel/rock). Running all 50 across the four voicing modes surfaces how the same Roman numeral sequence reads differently depending on whether it is treated as pop, jazz, soul, or electro — the theory stays the same, the color shifts completely.

Tools

  • React
  • Vite
  • Web Audio API
  • soundfont-player
  • Logic Pro
  • After Effects