2

I would like to plug a midi piano keyboard into my computer's USB port, and respond to the key events by displaying something in the browser.

Does anyone know of a library that will allow JavaScript to interact with USB midi keyboard events in the front-end/ browser?

Something like:
script.js file linked to index.html:

$(document).on('midi-key-press', function(event) {
    alert('the key that you pressed was ' + event.whichKey);
});

Thanks!

Maiya
  • 932
  • 2
  • 10
  • 26

1 Answers1

5

Webkits browsers have a native api.

Best is to check the specs in details: https://webaudio.github.io/web-midi-api/

About Firefox, this was asked since long time. It seems that support is coming.

https://bugzilla.mozilla.org/show_bug.cgi?id=836897

I use to made a little workaround with the web midi api. It detects any midi rotary knobs on any channel and will change the background color of the page. Based on the script samples provided by the specs.

Hopefully you will find something interesting.

https://github.com/webdev23/midiKnobControl

To be fair, it is a very powerful but hard to handle api.

This need a good knowledge of the midi protocol, know well your midi devices, and be up to date with javascript. It is also important to know how works the web audio api: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

edit: Mozilla is on it: https://github.com/mozilla/standards-positions/issues/58

NVRM
  • 11,480
  • 1
  • 88
  • 87
  • 1
    Hi, thanks for the info. It's a lot to digest. I'll look into them :) – Maiya Jan 31 '18 at 02:07
  • 1
    There are a number of libraries out there that can also help you tame MIDI in JavaScript. If you're a musician I'd suggest looking at https://github.com/cotejp/webmidi. You can setup your listeners to simply react to any "C" note or something similar instead of scouring the MIDI spec to figure out which message numbers map to that note. Not to be too self-promotional, but I've listed a lot of resources on my website and given talks on JavaScript + MIDI which you might find helpful: https://midi.mand.is – George Mandis Mar 11 '18 at 18:28