Update javascript/app.js

javascript/app.js

@@ -116,6 +116,23 @@ class MidiVisualizer extends HTMLElement {
       noteHeight: 4,
       beatWidth: 32,
     };
+
+    // Set the background color for the shadow DOM
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          background-color: #your-color-here; /* Replace with your desired background color */
+          display: block;
+          overflow: hidden;
+        }
+        .note.active {
+          stroke: black;
+          stroke-width: 0.75;
+          stroke-opacity: 0.75;
+        }
+      </style>
+    `;
+    
     this.tickPreBeat = 500;
     this.svgWidth = 0;
     this.playTime = 0;
@@ -372,11 +389,11 @@ customElements.define('midi-visualizer', MidiVisualizer);
     divProgress.className = 'progressDiv';
     const rect = progressbarContainer.getBoundingClientRect();
     divProgress.style.width = rect.width + 'px';
-    divProgress.style.background = 'black';
+    divProgress.style.background = 'white';
     divProgress.style.borderRadius = '8px';
     const divInner = document.createElement('div');
     divInner.className = 'progress';
-    divInner.style.color = 'black';
+    divInner.style.color = 'white';
     divInner.style.background = '#0060df';
     divInner.style.textAlign = 'right';
     divInner.style.fontWeight = 'bold';