Connect your browser and MIDI enabled devices with MIDIAccess!
MIDIAccess is the interface of the Web MIDI API that provides methods for listing which connected MIDI devices are currently available to your browser, and gives access methods for interconnecting with each device.
The available devices are split into two categories: inputs, and outputs.
Essentially, these are the channels by which the browser can send and receive MIDI messages from any external device you choose to interact with. For example: a MIDI controller, or a MIDI-enabled application.
Try out the Midi-Access-Demo by Ben Michel (@obensource) on CodePen.
Note: MIDI Controller Required
This is an experimental technology! It's not quite ready for production projects yet. It is also currently only available in Chromium-based browsers.
MIDIAccess is a Promise object returned from an invocation of navigator.requestMIDIAccess.
If the promise was resolved, the navigator interface returns a MediaAccess object containing the properties: inputs, outputs, sysexEnabled, and onstatechange.
MediaAccess.inputs is a MIDIInputMap containing the ports of all available external devices which can send MIDI messages to the MIDIAccess interface. This is a Map-hybrid which is read only, so you cannot use common write-based map functions like set(), clear(), or delete() with it.
MediaAccess.outputs is a MIDIOutputMap containing the ports of all available external devices which can receive MIDI messages from the MIDIAccess interface. This Map-hybrid also follows the same read only constraints as the .inputs property.
MediaAccess.sysexEnabled contains a read only boolean value that specifies if System Exclusive message support is permitted for a given instance of MIDIAccess. Enabling SysEx will introduce inherent security risks for you, so proceed with caution!
MediaAccess.onstatechange is an event handler function that returns an MIDIConnectionEvent object anytime a new MIDI port is added, or state changes in an existing port.
In case of a rejection, you can utilize a great polyfill so you're able to use the Web MIDI API. A MIDI-detector test can also be used to verify if your browser currently supports it.
If it does not, this script can be injected into your HTML source code to attain access:
<script src='http://cwilso.github.com/WebMIDIAPIShim/build/WebMIDIAPI.min.js'></script>Check to see if your browser supports the Web MIDI API, then ask the navigator for MIDIAccess and pass the result to your handlers (eg. onMIDIAccess & onMIDIAccessFailure).
if (navigator.requestMIDIAccess) {
navigator.requestMIDIAccess({ sysex: false }).then(onMIDIAccess, onMIDIAccessFailure)
} else {
console.warn(’This browser does not support MIDI.’)
}If access has been gained, you can begin to use a MIDIAccess object!
const onMIDIAccess = (midiAccessObject) => {
console.log(‘The MIDI Access Object:’, midiAccessObject)
}Errors typically occur in two cases: there are no MIDI devices currently available, or your browser doesn’t support the Web MIDI API.
In any case, handling an error allows you to alert the user of their best available options, and log standard errors:
const onMIDIAccessFailure = (err) {
console.log(`No MIDI devices are available, or the Web MIDI API isn’t supported by this browser.`)
console.log(`Utilize this Web MIDI API Polyfill in order to use the Web MIDI API: http://cwilso.github.io/WebMIDIAPIShim/`)
console.log(err)
}By looping through the available input values from connected devices, you can pass every message to a handler and begin doing incredible things with MIDI in your browser! Have fun! 🙌
const onMIDIAccess = (midiAccessObject) => {
let inputs = midiAccessObject.inputs.values()
for (let input = inputs.next(); input && !input.done; input = inputs.next()) {
input.value.onmidimessage = onMIDIMessage
}
}
const onMIDIMessage = (message) => {
console.log(`Raw MIDI message data: ${message.data}`)
}Current Web MIDI API Specification. W3C Editor's Draft: November 7, 2017.