diff --git a/index.html b/index.html index 555b584..cdc65e3 100644 --- a/index.html +++ b/index.html @@ -2423,20 +2423,24 @@ let notesPlaying = {} function webMidiStarted(){ let midiStarted = Date.now() console.log("WebMidi enabled!") - let myInput = WebMidi.getInputByName("MPK mini Play mk3"); // on Quest 2 - //let myInput = WebMidi.getInputByName("MPK mini Play mk3:MPK mini Play mk3"); // on desktop + //let myInput = WebMidi.getInputByName("MPK mini Play mk3"); // on Quest 2 + let myInput = WebMidi.getInputByName("MPK mini Play mk3:MPK mini Play mk3"); // on desktop WebMidi.inputs.forEach(input => console.log(input.manufacturer, input.name)); myInput.addListener("noteon", e => { let identifierNoOctave = e.note.identifier.slice(0,-1) - let b = addBlockCodeExample(identifierNoOctave, ""+ (Date.now()-midiStarted)/10000 + " 1.6 -.5") + let pos = ""+ (Object.getOwnPropertyNames(notes).indexOf(identifierNoOctave)/40+e.note.octave/3.3-1.1)+ " 1.2 -.2" + let b = addBlockCodeExample(identifierNoOctave, pos) + b.setAttribute("rotation", "-90 90 0") + b.classList.add("musicalnote") // until now often assumed as single class, probably will lead to bugs let inlineColored = [...b.querySelectorAll(".outlined_object")].map( el => el.setAttribute("color", notes[identifierNoOctave]) ) notesPlaying[e.note.identifier] = true; console.log(e.note); }); // for now assuming an arbitrary duration but should rely on notesPlaying myInput.addListener("noteoff", e => { notesPlaying[e.note.identifier] = false; console.log(e.note); }); // could be used for note duration + setInterval( _=> pushBackClass("musicalnote", .001), 10) } -const notes = {"A":"#f50000", "A#": "#f57a00", "B": "#f5f500", "C": "#7af500", "C#": "#00f500", "D": "#00f57a", "D#": "#00f5f5", "E": "#007af5", "F": "#0000f5", "F#": "#7a00f5", "G": "#f500f5", "G#": "#f5007a"}; +const notes = {"C": "#7af500", "C#": "#00f500", "D": "#00f57a", "D#": "#00f5f5", "E": "#007af5", "F": "#0000f5", "F#": "#7a00f5", "G": "#f500f5", "G#": "#f5007a", "A":"#f50000", "A#": "#f57a00", "B": "#f5f500", };