lauchmelder/MIDI_practice
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Changes for WebMIDI compatibility on iOS

Browse source
This commit is contained in:
krippix 2023-06-17 20:32:35 +02:00
parent cc28afc024
commit bc5b9ef931
1 changed files with 56 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
html/assets/scripts/midi.js
View file

@ -1,7 +1,8 @@
// prepare svg object for later use
var keyboard = document.getElementById("piano");
var svgDoc; // loaded keyboard svg
const keysB = [2,5,7,10,12,14,17,19,22,24,26,29,31,34,36,38,41,43,46,48,50,53,55,58,60,62,65,67,70,72,74,77,79,82,84,86]
var midiAccess = null;
const black_keys = [2,5,7,10,12,14,17,19,22,24,26,29,31,34,36,38,41,43,46,48,50,53,55,58,60,62,65,67,70,72,74,77,79,82,84,86]
window.addEventListener("load", function() {
svgDoc = keyboard.contentDocument;
@ -12,39 +13,72 @@ function setKeyState(note, state) {
let key = svgDoc.getElementById(String(note));
if (state) {
key.style.fill = "red";
} else if (keysB.includes(note)) {
} else if (black_keys.includes(note)) {
key.style.fill = "black";
} else {
key.style.fill = "white";
}
}
// Check if browser supports MIDI
if (!navigator.requestMIDIAccess) {
console.log('WebMIDI is not supported in this browser. Or Site was not opened via HTTPS');
}
// Attempt to establish a connection to the MIDI device
navigator.requestMIDIAccess()
.then(onMIDISuccess, onMIDIFailure);
function onMIDISuccess(midiAccess) {
console.log(midiAccess);
for (var input of midiAccess.inputs.values()) {
input.onmidimessage = getMIDIMessage;
/**
* Establishes MIDI connection
*/
function midiSetup() {
// Check if MIDI connection is possible at all
if (!navigator.requestMIDIAccess) {
alert('WebMIDI is not supported in this browser. Or Site was not accessed via HTTPS');
return
}
// Attempt to establish a MIDI connection. Handle success or failure
console.log("1231234");
window.navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
console.log("4321321");
}
/**
* Handle successful MIDI connection
* @param {*} midiAccess
*/
function onMIDISuccess(access) {
midiAccess = access;
console.log("access successful");
var input_list = [];
var iter = midiAccess.inputs.values();
for (let obj = iter.next(); !obj.done; obj = iter.next()) {
input_list.push(obj.value);
}
// Add event listener do all devices
for (var i = 0; i < input_list.length; i++) {
input_list[i].onmidimessage = getMIDIMessage;
console.log("amogus");
}
}
/**
* Handle MIDI failure
*/
function onMIDIFailure() {
console.log('Could not access your MIDI devices.');
let message = "Failed to access your MIDI device";
console.log(message);
alert(message);
}
/**
* Handle incoming MIDI Messages
* @param {*} midiMessage
*/
function getMIDIMessage(midiMessage) {
console.log("sugoma");
var command = midiMessage.data[0];
var note = midiMessage.data[1] - 20; // sorry midi standard
var velocity = (midiMessage.data.length > 2) ? midiMessage.data[2] : 0;
console.log(`MIDI{ command : ${command}, note : ${note}, velocity : ${velocity}}`);
if (command == 144){
console.log(note);
if (velocity == 0) {
@ -56,3 +90,6 @@ function getMIDIMessage(midiMessage) {
}
}
}
// code executed on include
window.onload = (x) => { midiSetup(); }