← diego zhou — index new york --:--

track 002 / 004

Voicings

dwg
002
year
2026
status
Live
type
Music Tool
stack
Next.js · TypeScript · VexFlow
01 — overview

A jazz piano voicing library: type or play a chord, see every voicing in any key, and chain them into voice-led ii–V–Is.

Voicings is a library for finding and studying jazz piano voicings. Type a chord symbol or play one, and it shows every matching voicing in that key with staff notation, labeled degrees, guide tones, and piano playback. Each voicing is stored once as a shape and plays in all 12 keys. A ii–V–I page chains voicings through major or minor progressions with the least hand movement, and the library filters by chord quality, structure, and tags.

02 — result
Voicings Find page with chord search and starter voicings on desktop
02-afind
03 — process

It is a Turbo monorepo with two Next.js apps over a shared Postgres/Prisma data model, plus packages for VexFlow notation, harmony analysis, and audio. A capture app records voicings from a MIDI controller or on-screen piano, detects the chord (including rootless and ambiguous readings using a chord prior built from a jazz-standards corpus), and tags structure automatically: shells, rootless A/B, drop 2/3, quartal, upper structures. Playback runs through one shared, self-hosted Steinway sampler.

parts

  1. 01Next.js
  2. 02TypeScript
  3. 03VexFlow
  4. 04Prisma
  5. 05Turbo
04 — screens
Voicings ii–V–I page chaining Dmin9, G13, and CMaj6 with staff notation and keyboards
04-aii–V–I paths
Voicings G13 voicing page on mobile with key picker and grand staff
04-bvoicing · mobile
Voicings G13/B voicing page with staff, keyboard degrees, guide tones, and alternate readings
04-cvoicing
Voicings Library page with chord search, quality, structure, and tag filters
04-dlibrary