WebMidi Parse Basic Input

webMidiListen.js

//
// choose an input, listen to it; (Chrome only; no iOS)
//

//
// HTML component:
//<label for="inputSelector">select midi input</label><br>
//<select id="inputSelector" onchange="updateInputPort()">
//    <option value="null" selected>[none]</option>
//</select>
//<br><br>
//<span>Newest Message Received</span><br><br>
//<span id="inputDisplay1">[no activity yet]</span><br>
//<span id="inputDisplay2"> </span><br>
//<span id="inputDisplay3"> </span><br>
//<span id="inputDisplay4"> </span>
//

// store midiAccess
var midi = null; 

// access input dropdown and the input text displays
var inputSelector = document.querySelector('#inputSelector');
var inputDisplay1 = document.querySelector('#inputDisplay1');
var inputDisplay2 = document.querySelector('#inputDisplay2');
var inputDisplay3 = document.querySelector('#inputDisplay3');
var inputDisplay4 = document.querySelector('#inputDisplay4');

// update input upon selection; 
// add input event listener
function updateInputPort() {
  var i = inputSelector.selectedIndex;
  inputPort = inputSelector.options[i].value;
  var input = midi.inputs.get(inputPort);
  input.onmidimessage = onMIDIMessage;
}

// on input event, list event time and data
function onMIDIMessage(message) {
  var timeIn = message.timeStamp.toFixed(2);
  inputDisplay1.textContent = "Time Stamp: " + timeIn + " ms"; 
  var statusByte = message.data[0].toString(16);
  var dataByte1 = message.data[1].toString(16);
  var dataByte2 = message.data[2].toString(16);
  inputDisplay2.textContent = "Status Byte: 0x" + statusByte;
  inputDisplay3.textContent = "Data Byte 1: 0x" + dataByte1;
  inputDisplay4.textContent = "Data Byte 2: 0x" + dataByte2;
}

// initialization -- list available input ports; 
function onMIDISuccess( midiAccess ) {
  midi = midiAccess;  
    midi.inputs.forEach( 
  	function(port, key) {
    var portName = port.name;
    var portID = port.id;
    var option = document.createElement("option");
    option.setAttribute("value", portID);
    var textNode = document.createTextNode(portName);
    option.appendChild(textNode);
    inputSelector.appendChild(option);    
	});
}

// initialize WebMIDI access
navigator.requestMIDIAccess().then(onMIDISuccess);