diff --git a/assets/instruments/instruments.json b/assets/instruments/instruments.json
index 4ad71d1..a080fac 100644
--- a/assets/instruments/instruments.json
+++ b/assets/instruments/instruments.json
@@ -92,7 +92,7 @@
"midi-channel-name": "conductorToms",
"image": {
"filename": "toms.svg",
- "yPos": "81%",
+ "yPos": "62%",
"width": "100",
"height": "100"
}
diff --git a/assets/instruments/orchestral-bass/bass.svg b/assets/instruments/orchestral-bass/bass.svg
index 334fb75..8499d8d 100644
--- a/assets/instruments/orchestral-bass/bass.svg
+++ b/assets/instruments/orchestral-bass/bass.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/midi.js b/src/midi.js
index d602d83..a60c744 100644
--- a/src/midi.js
+++ b/src/midi.js
@@ -1,6 +1,5 @@
export async function sendMidiMessage(midiChannelName, sampleNumber) {
try {
- const midiAccess = await navigator.requestMIDIAccess();
const availableMidiOutputs = midiAccess.outputs.values();
let midiOut;
diff --git a/src/script.js b/src/script.js
index 26e9fc1..2e1463c 100644
--- a/src/script.js
+++ b/src/script.js
@@ -4,8 +4,8 @@ import { DataStream } from "./socket.js";
import { Renderer } from "./render.js";
document.addEventListener("DOMContentLoaded", async () => {
- sendMidiMessage();
+ const midiAccess = await navigator.requestMIDIAccess();
const conductor = new Conductor();
await conductor.init();
const dataStream = new DataStream();
@@ -24,8 +24,7 @@ document.addEventListener("DOMContentLoaded", async () => {
const randomSampleNumber = Math.floor(Math.random() * numSamples);
renderer.placeIcon(selectedInstrument);
- sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1);
- console.log(selectedInstrument.midiChannelName, randomSampleNumber + 1);
+ sendMidiMessage(selectedInstrument.midiChannelName, randomSampleNumber + 1, midiAccess);
});
dataStream.init();
diff --git a/styles.css b/styles.css
index 0621e6e..9617a4d 100644
--- a/styles.css
+++ b/styles.css
@@ -78,6 +78,7 @@ html {
position: absolute;
top: 0;
left: -10px;
+ height: 12vh;
width: 102%; /* Matches JS padding */
display: block;
pointer-events: none;
@@ -89,7 +90,7 @@ html {
position: relative;
display: block;
width: 100%;
- height: 10vh;
+ height: 12vh;
background-color: rgb(24,24,24);
padding-top: 30px;
padding-bottom: 20px;
@@ -183,7 +184,7 @@ html {
background-color: rgb(24,24,24);
/* height: 20vh; */
font-family: Helvetica;
- font-size: clamp(18px,1.1vw, 18px);
+ font-size: clamp(14px,1.1vw, 18px);
}
@@ -214,9 +215,9 @@ html {
top: 0;
bottom: 0;
width: 2px;
- height: 82%;
+ height: 92%;
background-color: red;
- z-index: 999;
+ z-index: 0;
animation: moveRight 10s linear infinite;
will-change: transform;
}