Learning to Read Music with the
Web MIDI API
Node+JS Interactive 2019
http://bit.ly/web-midi-api
presented by…
&
MIDI?
MIDI
Musical Instrument Digital Interface
A technical standard since the '80s
For communication between digital musical instruments, audio devices, etc.
MIDI Messages
Channel Voice Message
Note On (144)
Note Number (0 - 127)
Velocity
Web MIDI API
+
Does this browser support the Web MIDI API?
if (navigator.requestMIDIAccess) {
console.log('WebMIDI is supported in this browser.');
navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
} else {
console.log('WebMIDI is not supported in this browser.');
}
caniuse.com
An alternative - JZZ, a MIDI library for Node.js and web-browsers
Draw the first note and get MIDI inputs
function onMIDISuccess(midiAccess) {
shuffleArray(level1Notes);
drawNote(level1Notes[noteIndex]);
var inputs = midiAccess.inputs;
var outputs = midiAccess.outputs;
for (var input of midiAccess.inputs.values()) {
input.onmidimessage = getMIDIMessage;
}
}
var level1Notes = [60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72];
Listen for the noteOn command
function getMIDIMessage(message) {
var command = message.data[0];
var note = message.data[1];
var velocity = message.data[2];
switch (command) {
case 144: // noteOn
document.querySelector('.note-info').textContent = 'Command: ' + command +
' , Note: ' + note + ' , Velocity: ' + velocity;
noteOnListener(note);
break;
}
}
noteOnListener
Checks if the note that was played was the correct note, turns it green or red
After 1.5 seconds, resets and displays the next note
Displays the score once all notes have been played
Demo Time!
https://noteon-demo-getyournoteson.b9ad.pro-us-east-1.openshiftapps.com/
Want to learn more?
https://github.com/jankleinert/get-your-notes-on
