Web MIDI API with maps (select ports)

select-midi-port.js

var select = document.createElement('select');
var selectedPort = null;

var onMessage = function (event) {
    // TODO: Use the message
};

var selectPort = function (id) {
    var newPort = midiAccess.inputs.get(id);

    if ( !newPort ) {
        throw new Error("Invalid port id");
    }

    if ( selectedPort ) {
        selectedPort.removeEventListener('midimessage', onMessage);
    }

    // save ID for remembering the port
    localStorage.setItem('port-id', id);
    selectedPort = newPort;
    selectedPort.addEventListener('midimessage', onMessage);
};

try {
    // attempt to select the port that was in use last time
    selectPort(localStorage.getItem('port-id'));
} catch ( error ) {
    // ignore
}

for ( let [ id, port ] of midiAccess.inputs.items() ) {
    let option = document.createElement('option');
    option.value = id;
    option.innerHTML = port.manufacturer + ' ' + port.name;
    options.selected = !!selectedPort && selectedPort.id === id;
    select.appendChild(option);
}

select.onchange = function () {
    selectPort(select.value);
};

// show the selection
document.body.appendChild(select);