Live rendering of piano keys to sheet music in the browser

Random Rachmaninov Chord

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:

Here’s a video of it in action:

Source Code: