The Web MIDI API was created to allow web applications to respond to MIDI controller inputs. In practical terms, this means a user with a MIDI keyboard can create music without specialized synthesizer or recording software installed on their computer. And it’s a two-way street - MIDI messages can also be sent from the web browser to MIDI-capable applications or devices attached to a user's computer. Currently, Web MIDI is supported by Chrome, Opera, and Android web browsers.

With so many MIDI-capable hardware devices out there, Web MIDI further blurs the line between local & web applications. Moving beyond standard keyboard/mouse/touchscreen input, web authors can create experimental and accessible content that employs familiar musical interfaces.

function onMIDIMessage (message) {
    var frequency = midiNoteToFrequency(message.data[1]);
 
    if (message.data[0] === 144 && message.data[2] > 0) {
        playNote(frequency);
    }
 
    if (message.data[0] === 128 || message.data[2] === 0) {
        stopNote(frequency);
    }
}

function onMIDIMessage (message) {
    var frequency = midiNoteToFrequency(message.data[1]);
 
    if (message.data[0] === 144 && message.data[2] > 0) {
        playNote(frequency);
    }
 
    if (message.data[0] === 128 || message.data[2] === 0) {
        stopNote(frequency);
    }
}

Coding a javascript-based web app with Web MIDI support is similar to standard implementations in non-web environments.  Check out this tutorial to get started.

Links

• Chrome Music Lab: Song Maker
• Web Audio MIDI Synthesizer
• Web Audio Drum Machine
• Blokdust
• drum-machine (with source code)

Next, we'll look at how you can program a Circuit Playground Express to act a as a MIDI controller for Web MIDI apps.