I made a simple web app for practicing/learning reading sheet music

[bali182]

I made this simple web app that I'm currently using to learn reading in bass clef. AlphaTab is the most important part of it, as without it neither playback nor score rendering would work so nicely and seamlessly, so big thanks for making free, open source, and most importantly answering my stupid questions :D

https://bali182.github.io/gonb

The goal here was to allow learning/practicing reading, while incrementally increasing the difficulty. So the app allows you to gradually increase the range, the variety of rhythms the key, the tempo. Also what it generates is not completely random. It first comes up with a reasonable sounding chord progression, and tries to fit the contour of the melody on top of that progression, so what you are practicing doesn't sound like fully random garbage.

Thanks again Daniel, for providing the biggest building block for this!

[nimblespark]

This is really cool! I'm interested how you come up with a "reasonable sounding progression". I'm doing something similar in a web app that I'm building and I'm using a chord chart like this:

And how does it try to fit the contour of the melody on top of that progression? Does it come up with the melody based on chord tones from the chosen chords in the progression or what does it do?

[bali182]

I'm mostly considering the harmonic function of the chords. I'm planning to extend this to be able to properly modulate and do more interesting stuff, but for now this is the gist of it:

• The key signature is set by the user (by default it's C major, but I allow all key signatures supported by AlphaTab, so up to 7 # and 7 b)
• The available notes are also set by the user, but I force them picking at least 1 note from the key.
• Based on this I filter out the chords that have at least 1 chord tone that matches 1 note from the user-selected notes.
• I also collect all the secondary dominants for these chords that have at least 1 chord tone that occurs in the user selected notes.
• After I got these chords, I randomly pick from a list of hard coded list of harmonic function sequences. For example ['Tonic', 'Subdominant', 'Dominant']. This allows it to stay fresh, as in C major this can be F, G, and C but it can also be Dm, Bdim and Am or any mix of these where the harmonic function matches.
• I also use the available secondary dominants leading to a chord from the key where it's possible.

To see this in practice go to Settings -> Chords enable Show chords symbols, then go to Settings -> Basic Settings and set Bars to arbitrarily high, let's say 64. This way you'll see pretty long chord progressions, and you'll see the chord symbols above each bar. You can also play with Settings -> Notes to see how this influences the chord selection.

As for the melody I start each bar with a chord tone, and pick subsequent notes from either the scale (high probability) the chord or just randomly from the available notes. I move mostly stepwise (high probability), but chromatic notes and larger intervals are also possible. I also treat the last note of each bar specially, I try to set up the next bars chord with either a scale note or a chromatic passing tone close to it.

For bass clef progressions I try to start as consonant as possible, so if available I start bars with roots or fifths.

This is not perfect, but it never sounds truly "bad", and I if you have a decent variety of note durations it usually sounds pretty decent.

[bali182]

If you come up with a rule set for generating rhythms I'd be interested, as for now that's something I generate completely randomly, and it shows.

[Danielku15]

Awesome job and thanks for sharing. Its always great to see how people use alphaTab in their apps. 🥳 🤩