Live rendering of piano keys to sheet music in the browser

Ha! There is a Working Draft for interfacing with MIDI devices in the browser. That is so cool. Unfortunately, only Chrome (and Chromium) has support for it yet.

Web MIDI API gives you low-level access to the midi messages stream for any MIDI controller connected to your computer. Today, most E-Piano or Keyboards come with an USB port.

I’ve written a simple website with vanilla JavaScript that uses the marvellous vexflow library to render the notes you press live on sheet music.

Try it out here: https://eliogubser.com/chord/

Here’s a video of it in action:

Source Code: https://github.com/gubser/chord/blob/master/chord.js