should be good

notes.txt

@@ -1,31 +0,0 @@
-stop zooming issue - resize rules
-mishka gonna send an x icon for the back behaviour
-look at memory leak??
-make the sound and menu icons part of an 'app bar' along with the conductor logo
-make the mid size the default size but double check the size on the phone isnt too small
-refactor when it's all done
-format the key as per the pdf
-sort out the title size
-sort out the blitzortung connection issue
-
-
-
-
-
-
-make the text max size smaller
-
-about page make title smaller
-
-
-
-lOOK AT SPACING BETWEEN THE TITLE AND STAVES AND THEN MAYBE ALSO THE STAVE SPACING
-
-TRY BOTH THE SVG RENDER AND THE RASTER RENDERING APPROACH...
-
-SCROLL BAR MUST GO (VERTICAL)
-
-Remove all passwords and google accounts from laptop.
-
-Ensure it boots into landscape mode
-

planeNotes.txt

@@ -1,11 +0,0 @@
-placeIcon method:
-	Now img is an <img> element - does it have a img.naturalHeight/Width property?
-	Check because we are using these values to draw the img.
-
-	What is the sheetWindow.offsetHeight? - This is probably okay but take a look.
-
-Moving forward:
-	We need to measure the stavewrapper and place the icons using an offset factor based on the stave number.
-
-
-

src/instruments.js

@@ -44,6 +44,8 @@ export async function loadInstruments() {
   const instruments = {};
 
   for (const [instrument, config] of Object.entries(instrumentsConfig)) {
+    const numSamples = config.filenames.length;
+
     const svgText = await fetchSvgText(
       `${config.directory}/${config.image.filename}`
     );
@@ -56,6 +58,7 @@ export async function loadInstruments() {
     );
 
     instruments[instrument] = {
+      numSamples: numSamples,
       image: img,
       yPos: config.image.yPos,
       midiChannelName: config["midi-channel-name"],

src/midi.js

@@ -1,30 +1,29 @@
-export async function sendMidiMessage(midiChannelName, sampleNumber ) {
-    try {
-        const midiAccess = await navigator.requestMIDIAccess();
-        const availableMidiOutputs = midiAccess.outputs.values();
-        let midiOut;
+export async function sendMidiMessage(midiChannelName, sampleNumber) {
+  try {
+    const midiAccess = await navigator.requestMIDIAccess();
+    const availableMidiOutputs = midiAccess.outputs.values();
+    let midiOut;
 
-        if (availableMidiOutputs.length === 0) {
-            console.error("No MIDI output devices found.");
-            return;
-        }
-
-        for ( const availableMidiOutput of availableMidiOutputs){
-            if (availableMidiOutput.name === midiChannelName){
-                midiOut = availableMidiOutput;
-                break;
-            }
-        }
-        
-        // MIDI Note On (Play Note)
-        midiOut.send([0x90, 36 + sampleNumber, 127]); 
-
-        // MIDI Note Off after 500ms
-        setTimeout(() => {
-            midiOut.send([0x80, 36 + sampleNumber, 0]); // Stop Note
-        }, 500);
-
-    } catch (error) {
-        console.error("Failed to get MIDI access:", error);
+    if (availableMidiOutputs.length === 0) {
+      console.error("No MIDI output devices found.");
+      return;
     }
+
+    for (const availableMidiOutput of availableMidiOutputs) {
+      if (availableMidiOutput.name === midiChannelName) {
+        midiOut = availableMidiOutput;
+        break;
+      }
+    }
+
+    // MIDI Note On (Play Note)
+    midiOut.send([0x90, 36 + sampleNumber, 127]);
+
+    // MIDI Note Off after 500ms
+    setTimeout(() => {
+      midiOut.send([0x80, 36 + sampleNumber, 0]); // Stop Note
+    }, 500);
+  } catch (error) {
+    console.error("Failed to get MIDI access:", error);
+  }
 }

src/script.js

@@ -10,18 +10,22 @@ document.addEventListener("DOMContentLoaded", async () => {
   await conductor.init();
   const dataStream = new DataStream();
   const instruments = await conductor.instruments;
-  console.log(instruments);
 
   const renderer = new Renderer();
 
   dataStream.addEventListener("strike", () => {
+    //** select instrument */
     const keys = Object.keys(instruments);
     const randomIndex = Math.floor(Math.random() * keys.length);
     const selectedInstrument = instruments[keys[randomIndex]];
 
-    renderer.placeIcon(selectedInstrument);
+    //** select sample */
+    const numSamples = selectedInstrument.numSamples;
+    const randomSampleNumber = Math.floor(Math.random() * numSamples);
 
-    // **** add midi trigger +++++++++ ///
+    renderer.placeIcon(selectedInstrument);
+    sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1);
+    console.log(selectedInstrument.midiChannelName, randomSampleNumber + 1);
   });
 
   dataStream.init();

styles.css

@@ -89,7 +89,7 @@ html {
     position: relative;
     display: block;
     width: 100%;
-    height: 20vh;
+    height: 10vh;
     background-color: rgb(24,24,24);
     padding-top: 30px;
     padding-bottom: 20px;
@@ -214,6 +214,7 @@ html {
     top: 0;
     bottom: 0;
     width: 2px;
+    height: 82%;
     background-color: red;
     z-index: 999;
     animation: moveRight 10s linear infinite;