3

I am working on an online musical score reading trainer, a prototype is available here. I was able to implement access to previously connected MIDI keyboard, however, I am struggling to implement a hot plug/unplug scenario.

My last take looks like this:

    setupDevices(inputs){
    let deviceName = '';

    inputs.forEach((value, key, map) => {
        if (value.connection === 'open' || value.connection === 'pending' ){

            value.open().then((midiInput) => {
                console.log(`Opened ${midiInput.name}`);
                midiInput.onmidimessage = midiController.onMIDIMessage;
            }, null);
        } else {
            value.onmidimessage = null;
        }
    });

    if (deviceName.length === 0) {
        deviceName = 'none';
    }

    document.getElementById('connectedDevice').setAttribute('value', deviceName);
},

onMIDISuccess(midiAccess) {
    midiAccess.onstatechange = (evt) => {
        console.log('MIDI config changed');
        midiController.setupDevices(evt.currentTarget.inputs);
    };
}

When debugging all the promises get called with good looking arguments, but I am not able to receive any key down messages. Also console.log(Opened ${midiInput.name}) gets called many more times than expected:

midiController.js:57 MIDI config changed
midiController.js:40 Opened KOMPLETE KONTROL - 1
midiController.js:57 MIDI config changed
midiController.js:40 Opened KOMPLETE KONTROL - 1
midiController.js:57 MIDI config changed
midiController.js:40 Opened KOMPLETE KONTROL - 1
midiController.js:40 Opened KOMPLETE KONTROL EXT - 1
midiController.js:40 Opened KOMPLETE KONTROL - 1
3
midiController.js:40 Opened KOMPLETE KONTROL EXT - 1
midiController.js:57 MIDI config changed
midiController.js:40 Opened KOMPLETE KONTROL - 1
midiController.js:40 Opened KOMPLETE KONTROL EXT - 1
midiController.js:57 MIDI config changed
midiController.js:40 Opened KOMPLETE KONTROL - 1
midiController.js:40 Opened KOMPLETE KONTROL EXT - 1
2
midiController.js:40 Opened Komplete Kontrol DAW - 1
midiController.js:57 MIDI config changed
midiController.js:40 Opened KOMPLETE KONTROL - 1
midiController.js:40 Opened KOMPLETE KONTROL EXT - 1
midiController.js:57 MIDI config changed
midiController.js:40 Opened KOMPLETE KONTROL - 1
midiController.js:40 Opened KOMPLETE KONTROL EXT - 1

 (all this gets printed just after I just turned the controller on). Any hints?

Tomasz Słota
  • 126
  • 1
  • 8
  • The code I posted is already listening to MIDIAccess.onstatechange, but I am unable to re-register for key events. – Tomasz Słota Aug 30 '18 at 06:43
  • I tried with a virtual MIDI device and I also have duplicate reports on my chrome 68 (each port is reported twice). One thing though, when you call *MIDIPort.open*, the MIDIAccess statechange will fire again if the MIDIPort was not yet connected. Same when you simply set its onmidimessage. – Kaiido Aug 30 '18 at 07:45

1 Answers1

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

See Working example

user1024
  • 1,121
  • 1
  • 9
  • 17
  • The example is not working well with my controller, which has multiple interfaces (sometimes it connects to the DAW interface instead of the keyboard). But it looks like a promising hint, thanks! – Tomasz Słota Aug 30 '18 at 06:50
  • Btw. your sampler library looks very good, I am going to give it a try. – Tomasz Słota Aug 30 '18 at 07:16