Array.prototype.compare = function(a){

return this.length === a.length && this.every((v, i) => v === a[i])

}

WebMidi

.enable({sysex: true})
.then(onEnabled)
.catch(err => console.log(err));

var index = 0; var keybDetected = false; disabled(true); function getInput(){

return WebMidi.inputs[index];

} function getOutput(){

var name = getInput().name;
return WebMidi.getOutputByName(name.replace("IN","OUT"));

} function onEnabled() {

index = 0;
keybDetected = false;
document.querySelector("#connected").style.background = "red";
document.querySelector("#connect").innerHTML = "Disconnect";
WebMidi.inputs.forEach((device, idx) => {
  document.querySelector("#di").innerHTML += `<option value="${idx}">${device.name}</option>`;
  if(device.name == "Code 61 Editor" || device.name == "MIDIIN4 (Code 61)")
    document.querySelector("#di").value = idx;
    index = idx;
});
if(WebMidi.inputs.length > 0)
{
  getInput().addListener("sysex", onSysex)
  sendDeviceQuery();
}
document.querySelector("#di").addEventListener("change", e=>{
  getInput().removeListener("sysex");
  keybDetected = false;
  disabled(true);
  document.querySelector("#connected").style.background = "red";
  index = document.querySelector("#di").value;
  getInput().addListener("sysex", onSysex)
  sendDeviceQuery();
});

} function onSysex(e) {

if(e.message.manufacturerId.compare([126]) && e.dataBytes.slice(0,8).compare([127,6,2,0,1,5,49,6])){
  keybDetected = true;
  document.querySelector("#connected").style.background = "green";
  sendUnlock();
  disabled(false);
  getSettings();
}
if(e.message.manufacturerId.compare([0,1,5]) && e.dataBytes.slice(0,4).compare([127,49,6,108])){
  var address = e.dataBytes[6]*128+e.dataBytes[7];
  var value = e.dataBytes[8]*128+e.dataBytes[9];
  if(address == 5 || address == 8) value -= 5;
  if(address == 6 || address == 9) value -= 12;
  document.querySelector("#option"+address).value = value;
}

} function sendDeviceQuery() {

getOutput().sendSysex(0x7e, [127,6,1]);

} function sendUnlock() {

getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6d, 0, 1, 1]);

} function getSetting(id) {

var msb = Math.floor(id / 128) % 128;
var lsb = id % 128;
getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6b, 0, 2, msb, lsb]);

} function sendSetting(id, value) {

if(value > 255) value = 255;
if(value < 0) value = 0;
var amsb = Math.floor(id / 128) % 128;
var alsb = id % 128;
var vmsb = Math.floor(value / 128) % 128;
var vlsb = value % 128;
getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6a, 0, 4, amsb, alsb, vmsb, vlsb]);

} function getSettings() {

[0,4,5,6,7,8,9,10,11,12,13,14,15,16].forEach(x=>getSetting(x));

} function setSettings() {

[0,4,5,6,7,8,9,10,11,12,13,14,15,16].forEach(address=>{
  var value = parseInt(document.querySelector("#option"+address).value);
  if(address == 5 || address == 8) value += 5;
  if(address == 6 || address == 9) value += 12;
  sendSetting(address, value)
});

} function disabled(d) {

[0,4,5,6,7,8,9,10,11,12,13,14,15,16].forEach(address=>{
  document.querySelector("#option"+address).disabled = d;
  if(d)document.querySelector("#option"+address).value="";
});
document.querySelector("#gs").disabled = d;
document.querySelector("#ss").disabled = d;

} function toggleMIDI() {

if(WebMidi.enabled) {
  WebMidi.disable();
  disabled(true);
  document.querySelector("#di").innerHTML = "";
  document.querySelector("#connect").innerHTML = "Connect";
  document.querySelector("#connected").style.background = "red";
}
else
{
  WebMidi
    .enable({sysex: true})
    .then(onEnabled)
    .catch(err => console.log(err));
}

}