visualized from rough keyboard positions

webchuck
Fabien Benetou 2 years ago
parent 65c8ef3743
commit c6588752a0
  1. 12
      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", };
</script>
<div id="observablehq-key">

Loading…
Cancel
Save