I needed a tool to train my sight reading, so I thought maybe there is an app for that; but then Opus one-shot this in 3 minutes:
I did *not* ask it to create a piano keyboard, I thought it would maybe arrange some buttons to press …
Uses the amazing https://www.vexflow.com/ library
VexFlow - HTML5 Music Engraving

Vexflow is a JavaScript library for rendering standard music notation and guitar tablature.

This is so effective, I’ve done it for maybe 60 minutes and I can feel myself noticeably improving already
It runs reasonably-well on mobile, though it could be improved, but side-scrolling the piano is smoother than expected!

I added another thing to #notenlesen: A visualization of your progress :)

Shows which notes you need to work on most to become fluid at #sightreading.

#piano

Hm, maybe I’ll need some sort of sliding window for notes, because the distribution gets really flat pretty fast
Had my piano lesson yesterday, and holy cow it takes so much load out of your brain once you internalize all the absolute note offsets …
Relative sight reading is important (especially in context), but it always breaks down when you have to jump between lines or there’s weird offsets that you don’t expect. Plus it is a lot harder to train a certain passage if absolute reading is not completely automatic.
@Profpatsch that’s the distance between two notes?
@RosaCtrl No which pitch/key a certain note maps to in a certain clef (treble and bass clefs for piano).
@Profpatsch do you have support for USB MIDI devices?
@grindhold not yet! will maybe look into it today haha
@grindhold I saw that only Chrome has support though, so Firefox can’t yet
@Profpatsch aaaand now for a native UI
@grindhold Turn 500 lines of HTML into 25000 lines of C++