Making The Web Rock

Web MIDI

+ChrisWilson / @cwilso

Google Chrome Developer Advocate

Web Audio/Web MIDI co-editor

DEMO

Synthesizer

Controlling it All

Web MIDI : webaudio.github.io/web-midi-api/

Developing standard - Only implemented in Chrome under a flag, but I wrote a cross-browser plugin-based polyfill.

Web MIDI

This is not cheesy background music!

That's "Standard MIDI files."

MIDI lets you connect controllers, synthesizers and more to your computer.

DEMO

Drum Machine

CODE

So how did I hook up that synthesizer?

Asking for MIDI devices

window.addEventListener('load', function() {   
  navigator.requestMIDIAccess().then( 
    onMIDIInit, 
    onMIDISystemError );
});

Enumerating MIDI output devices

(old style! Soon to stop working!)

function onMIDIInit( midi ) {
  var list=midi.outputs();

  for (var i=0; i<list.length; i++) {
    list[i].send( [0x90, 3, 32] );
  }
}

Enumerating MIDI output devices

(New style! Use this!)

function onMIDIInit( midi ) {
  for (var input of midiAccess.outputs.values())
    input.send( [0x90, 3, 32] );
}

MIDI Message syntax

MIDI has 16 virtual channels, blah blah blah.

MIDI spec:
http://www.midi.org/techspecs/midimessages.php

MIDI note numbers:
http://www.phys.unsw.edu.au/jw/notes.html

Enumerating MIDI input devices

(Old style! Soon to stop working!)

function onMIDIInit( midi ) {
  var list=midi.inputs();

  for (var i=0; i<list.length; i++)
    list[ i ].onmidimessage = midiMessageReceived;
}

Enumerating MIDI input devices

(New style! Use this!)

function onMIDIInit( midi ) {
  for (var input of midiAccess.inputs.values())
    input.onmidimessage = midiMessageReceived;
}

Parsing MIDI messages

function midiMessageReceived( ev ) {
    var cmd = ev.data[0] >> 4;
    var channel = ev.data[0] & 0xf;
    var noteNumber = ev.data[1];
    var velocity = 0;
    if (ev.data.length > 2)
      velocity = ev.data[2];

    // MIDI noteon with velocity=0 is the same as noteoff
    if ( cmd==8 || ((cmd==9)&&(velocity==0)) ) { // noteoff
      noteOff( noteNumber );
    } else if (cmd == 9) { // note on
      noteOn( noteNumber, velocity);
    } else if (cmd == 11) { // controller message
      controller( noteNumber, velocity);
    } else {
      // probably sysex!
    }
}