Created
July 21, 2016 15:18
-
-
Save patrickwhardy/6ebd00292e279b24f601b6b87452bbc9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
MIDI.org itself says “the Web-MIDI API is the most significant advancement of MIDI since… MIDI itself!” | |
- Why its awesome | |
Enabled by default in chrome - no software or setup needed | |
Works on all platforms and devices. Anything with a web browser can run a Web-MIDI app and use local MIDI hardware. | |
Works with your existing MIDI setup. If your MIDI gear is connected to your computer, tablet or phone (by a cable or even wirelessly) that same connection will connect your MIDI gear to your Web-MIDI enabled browser. | |
Updates are automatic. No need to install new versions, the latest version is always available at the website URL. | |
Accessible anywhere. Apps and data in “the Cloud” are available anywhere you have an internet connection. | |
Browsers make it easy to connect you and your music to other people via social media and on-line MIDI communities. | |
- Basic Setup | |
requestMIDIAccess() | |
method returns a ‘MIDI Access’ object, which contains all of our connected device’s info. This ‘MIDI Access’ object gets passed to the onMIDISuccess | |
onMIDISuccess() | |
this is where you set up all your inputs/signals etc | |
onMidiMessage() | |
the heart of the midi controller. passes "message" with all midi data on every event on the keyboard | |
function onMIDISuccess(midiAccess){ | |
midi = midiAccess; | |
var inputs = midi.inputs.values(); | |
// loop through all inputs | |
for(var input = inputs.next(); input && !input.done; input = inputs.next()){ | |
// listen for midi messages | |
input.value.onmidimessage = onMIDIMessage; | |
listInputs(input); | |
} | |
// listen for connect/disconnect message | |
midi.onstatechange = onStateChange; | |
showMIDIPorts(midi); | |
} | |
function onMIDIMessage(event){ | |
data = event.data, | |
cmd = data[0] >> 4, | |
channel = data[0] & 0xf, | |
type = data[0] & 0xf0, // channel agnostic message type. Thanks, Phil Burk. | |
note = data[1], | |
velocity = data[2]; | |
// with pressure and tilt off | |
// note off: 128, cmd: 8 | |
// note on: 144, cmd: 9 | |
// pressure / tilt on | |
// pressure: 176, cmd 11: | |
// bend: 224, cmd: 14 | |
// log('MIDI data', data); | |
switch(type){ | |
case 144: // noteOn message | |
noteOn(note, velocity); | |
break; | |
case 128: // noteOff message | |
noteOff(note, velocity); | |
break; | |
} | |
data[0] | |
144: note down | |
128: note off | |
data[1] | |
the note! | |
data[2] | |
velocity | |
then all we have to do is set up a player! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment