Chord-O-Matic – Upload a Song, Learn Its Chords

Chord-O-Matic is a web app that takes an MP3 and turns it into a clean chord sheet – chords placed above the correct lyric words, with small piano hand-placement diagrams above each chord. Think Ultimate Guitar, but generated automatically from any audio file.

The analysis pipeline runs server-side: upload an MP3 and the backend reads the ID3 tags (artist, title, album art via mutagen), detects chords using librosa’s chroma CQT features matched against 24 chord templates (12 major + 12 minor), fetches synced lyrics from LRCLIB, and aligns chords to words based on timing. The result is a fully rendered chord sheet in the browser within about 30 seconds.

The part I’m most excited about is Practice Mode. Connect a MIDI keyboard via Web MIDI API and the app becomes an interactive chord trainer. A 61-key on-screen piano shows the target chord highlighted in red. Play the correct notes and it flashes green, then advances to the next chord. Two modes: Follow Along (auto-plays each chord, waits for you to match) and Call & Response (plays the chord, you play it back). Strict mode requires exact note matching; relaxed mode allows extra notes.

Audio comes from real Salamander Grand piano samples via the smplr library – every keypress on your MIDI keyboard plays through high-quality sampled piano in the browser. Sustain pedal works too (CC#64). No external synth needed.

Tech

• Backend: Python, FastAPI, librosa, mutagen, SQLite
• Frontend: React 18, TypeScript, Vite, TailwindCSS
• Audio: smplr (Salamander Grand piano samples)
• MIDI: Web MIDI API via webmidi.js, tonal for chord/note resolution
• Chord detection: librosa chroma CQT + template matching (~70-75% accuracy)
• Hosted on GCE (Always Free tier)

Status

Live and functional. Chord detection, sheet rendering, and MIDI practice mode all working. Pending: DNS cutover to chordomatic.com, HTTPS, and improved chord detection accuracy.