/chr: a chord builder app [wip]

[/chr pt. 1/?] Documentation for the seekers, and the pain of programming for the rest.

May 30, 2026 - 3 minute read -
Music Coding

This is going to be a very long series about a music app (or two), where I do everything in my power to procrastinate research.

  1. /chr: a chord builder app (jump to main content)
  2. /chr: The pain of syncing states
  3. Music theory: Preliminaries
  4. Music theory: (Roman) Numerical Analysis
  5. Music theory: What’s this chord?
  6. Music theory: Tension in the deep Tonal Pitch Space
  7. Music theory: Dissonance — the science of alerts that still can’t wake me up at 8am
  8. Music theory: Progression, where one (or a few) things leads to another

Shameless plug before we begin: I also have a web app to learn the piano!

I don’t advertise this mostly because there is zero music theory and 100% pure implementation, but I’m still pretty proud of it regardless. Take a look!

Introduction

/chr: [slash-chord] is a chord builder app that has all the fancy functionalities that I (thought I) needed to create fancy chord progressions! It has:

You can find it here at https://ngoc.io/chr. Implementation details will be provided in the next post, but I assume no one really cares about that.

This document should be updated as changes are rolled out, but even I wouldn’t count on myself to reliably do it…

Functionalities

Chord Builder

Keyboard

Chord Analysis

MIDI Listening

Sequencer

MIDI Recording

Progression Analysis

Shortcuts

As hinted, there are a lot of shortcuts to be used in this app! I hope all of them are very intuitive, as it really was designed to feel like Ableton Live which I really like.

Playback

  • Space: Play/Stop
  • Shift + Space: Pause
  • R: Toggle record mode
  • Cmd+O: Toggle metronome
  • Cmd+M: Toggle mute
  • AASDFGHJKL and WETYUOP: virtual keyboard
  • ZXCVBNM: Diatonic chords of the project key

Sequencer

  • Cmd+Z: Undo chord action
  • Cmd+X: Cut the selected chords — remove them and store them in the clipboard
  • Cmd+C: Copy the selected chords — only store them in the clipboard
  • Cmd+V: Paste the clipboard chords starting at the selector head
  • Cmd+Shift+Z/Cmd+Y: Redo chord action
  • Cmd+A: Select all chords
  • Cmd+D: Duplicate selected chords
  • Cmd+E: Split the chord at the selector head
  • Escape: Get-me-out-of-whatever-this is
  • Backspace/Delete:
    • When editing a chord, press once to clear that chord to empty, and once more to delete it off the sequencer.
    • When selecting one or more chords, press to delete the selected chords.

Analyzer

  • I: toggle MIDI live listening.

Future improvements

  • Super+something for the rest of the existing functionalities.

Closing thoughts

Well, it has been a mess of a development, but here we are! I had to learn a lot in both web development and music theory in the process, but it was fun! Well, not so much for my research progress though. Also, I now kind of understand why people like JS development: I really like the fact that it’s responsive and universal. I have this really bad trait where I like everything to be perfect, and as a result everything I make needs to be intuitive, accessible, and minutely refined even if no one uses it or even ever heard of it. Well, time to not make any music and move on to the next distraction!

…after I’m actually done with this project, which is going to take a while given the whole enormous list of unimplemented features up there.