bluefruit___ble_Screen_Shot_2018-11-23_at_9.19.36_PM.png
Web Audio MIDI Synthesizer

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

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.

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

This guide was first published on Dec 04, 2018. It was last updated on Dec 04, 2018.

This page (Web MIDI) was last updated on Oct 22, 2021.

Text editor powered by tinymce.