MIDI Web based learning tool

[Utopiah]

I made https://glitch.com/edit/#!/webmidi-abc-chromatone which is based on WebMIDI, ABC and Chromatone notations, Tone.js as synth, all this to get visual and audio feedback from a MIDI keyboard.

One should open the page https://webmidi-abc-chromatone.glitch.me/ on a WebMIDI supported browser, e.g Chromium ones, and select their keyboard.

I believe this could be adapted to rely on the notemap https://www.sebulli.com/haxo/notemap/ and train with it.

[Utopiah]

Once I will solder pins on my RPi Zero I'll try MIDI with the Haxophone and see if this work and eventually adapt to the tonemap. Testing and suggestions welcomed!

[jcard0na]

Nice!

I wrote a while back an ear-training tool, also using Tone.js (https://app-l7bccxltpa-lz.a.run.app/ , source: https://github.com/jcard0na/ihum). I was also thinking about modifying to use the haxophone. Whatever you learn will be useful!

Thanks for sharing.

[Utopiah]

Here is the XR example https://twitter.com/utopiah/status/1626579721164292102

[Utopiah]

Yeay getting there!

[jcard0na]

Hi @Utopiah,

You are very close. Each (haxophone) key is represented by a single bit in a 32-bit number. A fingering is represented as a 32-bit number constructed by those 1's and 0's. That number is converted to a decimal string and used as a (lookup) key into a binary search tree constructed from the notemap.

So, for instance, no keys pressed is all zeroes, therefore "0", the first line on the note map, which corresponds to midi note 73 (C#) on a C-instrument. That needs to be transposed to the type of instrument you are using, for instance, a tenor (Bb) needs to be transposed -2 semitones, so what is actually played is a natural B. (BTW, this used to be different, but we just changed it, see cardonabits/haxo-rs#27 for details).

So, in order to find out what fingering goes with a note, you need to do a reverse traversal of the search tree. And keep in mind that there may be multiple fingerings for a given note, so you probably want to start by removing all alternate fingerings and just showing the most common one. Let me know if you need help to do that (not sure how fluent you are with the saxophone).

[jcard0na]

I should add that for your tool you need not bother about transposition, as the notemap, with the new changes from Peter, shows the fingering for the "written note". That's because sax players transpose their sheet music so that a written C# will always be played with all keys released. That "written C#" will sound as a B on a Bb intrument or an E on an Eb horn. But to teach sight reading (mapping a note on a score to a fingering), you just need to look at the notemap. Then, in your tool, you can handle transposition just for playback.

Not sure if this was the best explanation... please let me know if you need additional details.

[Utopiah]

Thanks that does help but I'm still missing a piece of information I believe. Namely when you say "A fingering is represented as a 32-bit number constructed by those 1's and 0's" I imagine that I get e.g 001000.... so all keys are off except the 3rd one, but which key is that? Are they sequential i.e here it would be column 0 key 2?

Would make sense as the longest resulting binary string if 24 so 3x8, yet there are 7 keys on the first column, so there is a "missing" 7th key never used for example?

[Utopiah]

Something is off because c2k3 does not exist according to https://github.com/cardonabits/haxo-hw#keyboard yet 76 asks for 10010010010010000001 which if my assumption were correct would lead to 10010010 01001000 0001 but that does not seem possible, so maybe here is a sequential mapping instead so here 76 would be c2k2?

[jcard0na]

This is the function that converts keys pressed to numbers.
There are three columns with eight rows each. The svg diagram in the main README is from the design phase, and not really up to date with the implementation. In particular, the specific row numbers may not match the order in the code. To generate the notemaps I just printed the output of the scan function to the logs for each fingering.

You don't have to do that. Just load a minimal notemap.json on my fingering app. Toggle notemap visibility and start clicking on keys and adding fingerings. That's probably the quickest way to know which key corresponds to which bit (...until someone decides to document this properly 😉 ).

Hope that it helps

[jcard0na]

Hey, I just gave this a try with my haxophone. Very impressive, in such a short time!

2 comments and a question

1. The Haxophone is constantly sending midi cc as air pressure changes to adjust the volume of the note. These events seem to be picked up as new notes by your software.

2. Haxophone also sends new notes even if they are below the audible threshold. This is not a problem with analog audio output, but when capturing notes, some notes that are not audible are still displayed on the score. (This is also a problem with Garage Band, BTW). Probably we want to put a cut-off volume threshold in haxo-rs, but until then, you might want to incorporate that in your code: if volume below X, ignore all incoming notes.

3. On Firefox I get this error. Is it fixable?

Chrome works out of the box:

[Utopiah]

Thanks for trying!

1. indeed that wasn't the behavior I had with learning/teaching piano so I'll adjust
2. assuming the volume data is passed then indeed could be filtered out below a threshold
3. I didn't get that error on Firefox 1.21.0 but I'll check. It might be because WebMIDI support is relatively recent for it, until recently it was only in Chromium iirc

[Utopiah]

Fun idea but such an online "tutor" interactive documentation could be built and shared on the device. I understand it might not be advisable due to the latency it might create but maybe for newcomers it would be an acceptable trade off. This would mean provide an HTTP (or maybe HTTPS due to WebMIDI permissions required) directly on the RPi.