Web MIDI API

The Web MIDI API connects to and interacts with with Musical Instrument Digital Interface (MIDI) Devices.

The interfaces deal with the practical aspects of sending and receiving MIDI messages. Therefore, the API can be used for musical and non-musical uses, with any MIDI device connected to your computer.

Interfaces

MIDIInputMap: Represents all of the available MIDI input ports.
MIDIOutputMap: Represents all of the available MIDI output ports.
MIDIAccess: Provides the methods to list input and output devices, and to access an individual device.
MIDIPort: Represents an individual MIDI port.
MIDIInput: Provides a method for dealing with MIDI messages from an input port.
MIDIOutput: Queues messages to the linked MIDI port. Messages can be sent immediately or after a specified delay.
MIDIMessageEvent: The event passed to MIDIInput.onmidimessage.
MIDIConnectionEvent: The event passed to the MIDIAccess.onstatechange and MIDIPort.onstatechange event handlers, when a port becomes available or unavailable.

Examples

Gaining access to the MIDI port

In the following example the MIDIAccess interface is used to gain access to a MIDI device.

var midi = null;  // global MIDIAccess object
function onMIDISuccess( midiAccess ) {
  console.log( "MIDI ready!" );
  midi = midiAccess;  // store in the global (in real usage, would probably keep in an object instance)
}

function onMIDIFailure(msg) {
  console.log( "Failed to get MIDI access - " + msg );
}

navigator.requestMIDIAccess().then( onMIDISuccess, onMIDIFailure );

Listing inputs and outputs

In this example the list of input and output ports are retrieved and printed to the console.

function listInputsAndOutputs( midiAccess ) {
  for (var entry of midiAccess.inputs) {
    var input = entry[1];
    console.log( "Input port [type:'" + input.type + "'] id:'" + input.id +
      "' manufacturer:'" + input.manufacturer + "' name:'" + input.name +
      "' version:'" + input.version + "'" );
  }

  for (var entry of midiAccess.outputs) {
    var output = entry[1];
    console.log( "Output port [type:'" + output.type + "'] id:'" + output.id +
      "' manufacturer:'" + output.manufacturer + "' name:'" + output.name +
      "' version:'" + output.version + "'" );
  }
}

Handling MIDI Input

This example prints incoming MIDI messages on a single port to the console.

function onMIDIMessage( event ) {
  var str = "MIDI message received at timestamp " + event.timestamp + "[" + event.data.length + " bytes]: ";
  for (var i=0; i<event.data.length; i++) {
    str += "0x" + event.data[i].toString(16) + " ";
  }
  console.log( str );
}

function startLoggingMIDIInput( midiAccess, indexOfPort ) {
  midiAccess.inputs.forEach( function(entry) {entry.onmidimessage = onMIDIMessage;});
}

Specifications

Specification
Web MIDI API