sorted mime type problem

README.md

@@ -1 +0,0 @@
-# conductor

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,4 +1,4 @@
-export async function sendMidiMessage(midiChannelName, sampleNumber ) {
+export async function sendMidiMessage(midiChannelName, sampleNumber) {
   try {
     const midiAccess = await navigator.requestMIDIAccess();
     const availableMidiOutputs = midiAccess.outputs.values();
@@ -9,8 +9,8 @@ export async function sendMidiMessage(midiChannelName, sampleNumber ) {
       return;
     }
 
-        for ( const availableMidiOutput of availableMidiOutputs){
+    for (const availableMidiOutput of availableMidiOutputs) {
-            if (availableMidiOutput.name === midiChannelName){
+      if (availableMidiOutput.name === midiChannelName) {
         midiOut = availableMidiOutput;
         break;
       }
@@ -23,7 +23,6 @@ export async function sendMidiMessage(midiChannelName, sampleNumber ) {
     setTimeout(() => {
       midiOut.send([0x80, 36 + sampleNumber, 0]); // Stop Note
     }, 500);
-
   } catch (error) {
     console.error("Failed to get MIDI access:", error);
   }

src/render.js

@@ -1,4 +1,4 @@
-import { Conductor } from "./conductor";
+import { Conductor } from "./conductor.js";
 
 export class Renderer {
   timeIndicator;

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();

src/socket.js

@@ -1,4 +1,4 @@
-import { BrowserSocketFactory, Client } from "./blitz";
+import { BrowserSocketFactory, Client } from "./blitz.js";
 
 export class DataStream extends EventTarget {
   constructor() {

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;