ClefHanger
ClefHanger is a tiny sight-reading game for the phone.
Notes move across the staff toward a cliff. Name the note before it drops. That is the whole joke, and also the useful part.
Why this exists
I want a way to practise reading notes without sitting down at a keyboard.
Most music-reading tools assume a piano layout, a MIDI device, or at least a desktop-sized screen. That is fine if the piano is the point. It is less fine for singers, guitarists, choir people, and beginners who just want the staff to stop looking like a polite fence.
The first question is small: can a one-minute phone game make note names stick?
If yes, then the harder things can come later. Ledger lines. Intervals. Rhythm. Singing into the phone. The usual ladder of pain.
Current build
The current build is a static browser app. No account. No backend. Load it, practise for a minute, leave. It also installs as a small PWA, because opening a practice toy should not require finding the right browser tab first.
The last few slices changed the tone of the app. It is less quiz-first now. New players land in Practice mode, not panic mode. Practice has no timer. It starts with C, D, and E only. Then it widens into line notes, space notes, and the full set.
A wrong tap is no longer just a small red scolding. The app says what the note was, labels it on the staff for a moment, and highlights the right button. That feels much more like learning. Still a little annoying, but usefully annoying.
There is also a first microphone path now. The idea is simple: sing the note, or play it on a guitar, and let the phone hear the answer instead of tapping a button. In the current build the microphone can listen, show the detected note and frequency, ignore some absurd octave spikes, and score sung natural-note answers when the pitch is close enough. Chords are not there yet.
The messy part is everything around it. Browser microphones are permission theatre. Chrome and Firefox behave differently on phones. Sometimes the stream is granted but silent. Sometimes the analyser sees almost nothing until the audio graph is kept alive in just the right boring way. Real rooms add noise. Guitars add harmonics. Voices wobble. A detected frequency still has to become a useful answer in a game.
But if it works, it changes the toy. ClefHanger stops being only a note-name quiz and becomes a small call-and-response practice loop. Read the staff. Sing or play the answer. See what the phone heard. That could make it useful for singers, guitarists, and anyone who does not want the piano keyboard to be the default input device for music.
What works now:
- Practice and Rush modes: slow untimed learning first, 60-second cliff game when wanted
- first-run tutorial with three small staff-reading tips
- beginner lessons for first steps, line notes, space notes, and mixed natural notes
- adaptive answer buttons: the first lesson only asks for
C D E - visual correction labels after mistakes, plus a highlighted correct button
- treble and bass clef drills
- natural notes, sharps, flats, and simple chord stacks
- big thumb buttons for
C D E F G A B - accidentals and chord answers without a typing field
- an optional one-octave piano strip
- correct answers play back as notes, with chords as short arpeggios
- microphone input for sung natural-note answers, with a visible pitch/frequency readout and a small recording diagnostic
- a 1–10 speed slider, from slow practice to small panic
- Beginner, Easy, Normal, and Hard difficulty
- one-, two-, and three-note queues
- local high scores per mode, slider speed, and difficulty
- an offline-capable PWA shell with proper icons, iOS home-screen tags, and app shortcuts
The shape I like
It is closer to Ductus than to a full music course. Ductus asks whether a browser can give useful feedback about hand movement. ClefHanger asks whether a browser can make staff reading less stiff.
Both are practice loops. Short. Slightly annoying on purpose. Easy to repeat.
It also sits near the browser-game work: Web Games Arcade, Accidental Overlord, and Void Crawler. ClefHanger has a smaller job: stay quick enough to use while waiting for coffee.
Next
The app now has the first tiny teacher loop. That was the missing bit. A beginner can tap the wrong answer and get a useful hint instead of just losing.
Useful next tests:
- whether the three-note start is too narrow or just right
- whether line notes and space notes need small intro cards before the first prompt
- whether the piano strip actually teaches anything, or only feels reassuring
- whether microphone pitch detection is good enough for singing practice outside a quiet room
- whether weak notes should be tracked locally so the next practice run is less random
For now the main test is simpler: open it on the phone, miss a note, and see whether the correction makes you want to try the same note again.
Launch: simiono.com/clefhanger · Source: github.com/utrost/ClefHanger · Roadmap: docs/mvp-roadmap.md
See also: Projects, Ductus, Web Games Arcade, Accidental Overlord, Void Crawler, Things, Workbench, Studies