Why is this Web MIDI API code not detecting MIDI events?

Question

I'm writing a Chrome app, using the current stable build of Chrome (42.0.2311.152). I have this problem both on Linux and on my Chromebook.

I have a USB MIDI keyboard which is being recognized, but no MIDI events are detected. I have checked with other programs and am sure my device is sending MIDI events.

Here's my code:

function midihandler( event ) {
  console.log("Received MIDI event");
  var msg = "Recieved MIDI event ";
  for (i=0 ; i < event.data.length ; i++) {
    msg += "0x" + event.data[i].toString(16) + " ";
  } 
  console.log(msg);
}

function setupMIDI() {
  navigator.requestMIDIAccess().then(
    function (m) {
       console.log("MIDI initialized");
       m.inputs.forEach(
         function (entry) {
          console.log("detected MIDI input device " + entry.name);
          entry.onmidimessage = midihandler;
          for (var key in entry) {
            console.log("entry." + key + " = " + entry[key]);
          }
        }
      );
    },
    function (msg) { console.log("error initializing MIDI: " + msg); }
    );
}


window.onload = function() {
  console.log("window.onload called");
  setupMIDI();
};

The console output I get is:

window.onload called
MIDI initialized
detected MIDI input device MPKmini2 MIDI 1
entry.onmidimessage = function midihandler( event ) {
  console.log("Received MIDI event");
  var msg = "Recieved MIDI event ";
  for (i=0 ; i < event.data.length ; i++) {
    msg += "0x" + event.data[i].toString(16) + " ";
  }
  console.log(msg);
}
entry.ondisconnect = null
entry.version = USB-Audio / ALSA library version 1.0.25
entry.type = input
entry.name = MPKmini2 MIDI 1
entry.manufacturer = AKAI
entry.id = 24:0 MPKmini2 MIDI 1
entry.addEventListener = function addEventListener() { [native code] }
entry.removeEventListener = function removeEventListener() { [native code] }
entry.dispatchEvent = function dispatchEvent() { [native code] }
detected MIDI input device Midi Through Port-0
entry.onmidimessage = function midihandler( event ) {
  console.log("Received MIDI event");
  var msg = "Recieved MIDI event ";
  for (i=0 ; i < event.data.length ; i++) {
    msg += "0x" + event.data[i].toString(16) + " ";
  }
  console.log(msg);
}
entry.ondisconnect = null
entry.version = ALSA library version 1.0.25
entry.type = input
entry.name = Midi Through Port-0
entry.manufacturer = 
entry.id = 14:0 Midi Through Port-0
entry.addEventListener = function addEventListener() { [native code] }
entry.removeEventListener = function removeEventListener() { [native code] }
entry.dispatchEvent = function dispatchEvent() { [native code] }

That is, the devices are recognized, and the onmidimessage handler appears to be set.

Yet, no events are detected when I press the keys on my MIDI keyboard.

What am I doing wrong?

Answer 1

According to http://caniuse.com/#feat=midi, MIDI support was added to Chrome 43. To get web MIDI working in older versions of chrome, you need to enable it as an 'experimental feature' in the chrome settings, and you need to install the jazz plugin http://jazz-soft.net/doc/Jazz-Plugin/.

I've jumped through the hoops of getting 'experimental' MIDI working on my computer, but in your case it'll probably be easiest to just update your browser.