javascript - 如何使用 Web MIDI 处理设备插入/拔出？

Question

我正在开发一个在线乐谱阅读训练器，a prototype is available here .我能够实现对以前连接的 MIDI 键盘的访问，但是，我正在努力实现热插拔方案。

我最后一次拍摄是这样的:

    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);
    };
}

在调试时，所有的 promise 都以漂亮的参数调用，但我无法收到任何按键消息。另外 console.log(Opened ${midiInput.name}) 被调用的次数比预期的多:

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

(所有这些都是在我刚打开 Controller 后打印出来的)。有什么提示吗？

Answer 1

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);

参见 Working example