Web midi on Chrome works with local server but not when served in the cloud

Question

I built a website that uses the Chrome web midi interface (based on navigator.requestMidiAccess) that works fine in a local development server, but when pushed to a cloud server fails, saying that navigator.requestMidiAccess is not a function. The same code, the same browser. I'll try to include the relevant code:

function initializeMidi() {
    navigator.requestMIDIAccess()
        .then(
            (midi) => midiReady(midi),
            (err) => console.log('Something went wrong', err));
}   

window.onload = (event) => {
    initializeMidi();
};

// this next function builds a list of radio buttons to select the MIDI device
function midiReady(midi) {
    globalMidi = midi.outputs

    parentElement = document.getElementById('midi-devices-div')
    parentElement.innerHTML = ''
    var lastMidiPortName = null
    midi.outputs.forEach(function (port, key) {
        addRadioButton(parentElement, port)
        lastMidiPortName = port.name
    })
    var n = window.localStorage.getItem('selectedMidiPortName')
    if (n)
    {
        var e = document.getElementById(n)
        e.checked = true

    }
}

Answer 1

The Web MIDI interface is only exposed to SecureContexts, you must serve your document using https://.