WebMidi.js does not recognize my midi controller

Question

I am trying to use the WebMidi.js library to read inputs from my midi controller.

When I try to log the inputs or outputs, it comes up as an empty array. Here is my code:

WebMidi.enable(function (err) {
if (err) {
  console.log("WebMidi could not be enabled.", err);
} else {
  console.log("WebMidi enabled!");

  console.log(WebMidi.inputs);
  console.log(WebMidi.outputs);
}
});

The log I get is 2 empty arrays for input and output.

And here are pictures of my Midi Studio setup in Mac. I'm not sure if I'm supposed to do some extra configuration here to make my Roland A-PRO show up as an input/output. I see that it is grayed out which makes me think it must need some extra configuration.

The controller works when I run it through Ableton, however.

Answer 1

example for vanilla JS

function midiOnStateChange(event) {
    console.log('midiOnStateChange', event);
}
function midiOnMIDImessage(event) {
    console.log('midiOnMIDImessage', event);
}
function requestMIDIAccessSuccess(midi) {
    var inputs = midi.inputs.values();
    for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
        console.log('midi input', input);
        input.value.onmidimessage = midiOnMIDImessage;
    }
    midi.onstatechange = midiOnStateChange;
}
navigator.requestMIDIAccess().then(requestMIDIAccessSuccess);

run example in browser https://surikov.github.io/webaudiofont/examples/midikey.html