vexflow

I am also building a piano-learning game. I remember using WebMIDI for the interface, TonalJS for chord/theory. From another comment, https://github.com/0xfe/vexflow looks cool, I could use it together with PIXI.js for the rendering.

Ah, I know the feeling. I also had a teacher who built his own things with very limited coding skills. Then I started making quick flashcard-style exercises and he was a lot of help testing and helping refine these. So now I have this site with various tools I built over the years: https://www.onlinemusictools.com/ Libs that helped: - https://github.com/saebekassebil/teoria for scales, chords etc - https://github.com/0xfe/vexflow for notation - https://github.com/goldfire/howler.js for playing piano samples. I used to DIY (because I love DIY), not even using WebAudio but recently tried howler and it's abstracting a few things I don't need to worry about - https://github.com/omnibrain/svguitar/ draw guitar fretboard. I recently did my first guitar-specific exercise and this was good. I even filed a feature request and the dev did it I'd b

Ohh Hi! I've come across pianojacq before! Definitely love how clean the sheet music looks and on first glance the way the song plays smoothly even when you hit the note a little late/early works really well! That's one aspect I really need to improve. I see you're also using Vexflow. Are you using a library to go from Midi to Vexflow format? It's a rabbit hole I sometimes wish I hadn't entered :) @OP Can really recommend VexFlow [0] when you do get to implementing sheet music. [0] https://github.com/0xfe/vexflow

Not mentioned in the article, but a couple of notable open-source libraries for rendering music notation in the browser: A JavaScript library for rendering music notation and guitar tablature - https://github.com/0xfe/vexflow OpenSheetMusicDisplay renders sheet music in MusicXML format - https://github.com/opensheetmusicdisplay/opensheetmusicdispl...

I posted an earlier version of this about 2 years ago. Since then I've added a bunch of music theory exercises and created a system for teachers to use the exercises in their classes by giving assignments, tracking scores, etc. The new music theory exercises use vexflow (https://github.com/0xfe/vexflow ) for drawing the staff in addition to midi.js for the sound. The teacher-account backend uses Django.

Notation Training http://notationtraining.com Sinatra app running on Linode server + heavy use of VexFlow (https://github.com/0xfe/vexflow). It is up and running for few years now, getting around 200 - 300 users a day.

The closest thing to an open-source in-browser JS renderer would be something based on https://github.com/0xfe/vexflow, but a reliable converter for MusicXML hasn't been written yet.