working principle (untested in XR)

index.html

@@ -25,6 +25,7 @@
     <script src="https://unpkg.com/shiki"></script>
     <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-physics-system@v4.2.2/dist/aframe-physics-system.min.js"></script>
     <script src='dependencies/mannequin.js'></script> 
+    <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
 
     <!-- replacing with local copies as CDNs are like unpkg tend to be slow
     <script type="module" src="https://unpkg.com/immers-client/dist/destination.bundle.js"></script>
@@ -2080,6 +2081,7 @@ function addScreenshot(){
 
 function newPrimitiveWithOutline( name="box", position="0 0 0", scale=".1 .1 .1" ){
 	let el = document.createElement("a-"+name)
+	el.className = "outlined_object" 
 	let el_outline = document.createElement("a-"+name)
 	el.appendChild(el_outline)
 	el.setAttribute("scale", scale)
@@ -2412,6 +2414,27 @@ async function moveMannequinPartExample(mannequin=0){
 	people[mannequin].head.tilt -= distance
 }
 
+//doesnt seem to be sufficient to call directly from here, works from the console though.
+WebMidi.enable().then(() => webMidiStarted() ).catch(err => alert(err));
+// should work as jxr hopefully
+
+let notesPlaying = {}
+function webMidiStarted(){
+	let midiStarted = Date.now()
+	console.log("WebMidi enabled!")
+	myInput = WebMidi.getInputByName("MPK mini Play mk3:MPK mini Play mk3");
+	myInput.addListener("noteon", e => {
+		let identifierNoOctave = e.note.identifier.slice(0,-1)
+		let b = addBlockCodeExample(identifierNoOctave, ""+ (Date.now()-midiStarted)/10000 + " 1.6 -.5")
+		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
+}
+
+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"};
+
 </script>
 <div id="observablehq-key">
     <div id="observablehq-viewof-offsetExample-ab4c1560"></div>