Highlight each note in a chord as it's being played

js/src/guitar-diagrams-web-component.mjs

@@ -864,19 +864,62 @@ class GuitarDiagramsWebComponent extends HTMLElement {
     // play slowly
     let timeGap = 0;
     let now = Tone.now();
-    allNoteFrequencies.forEach((freq) => {
+    this.#markers.forEach((marker) => {
-      this.#outputSpeaker.triggerAttack(freq, now + timeGap);
+      const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
+      // Draw yellow after a timeout.
+      setTimeout(() => {
+        canvas.beginPath();
+        canvas.fillStyle = "yellow";
+        this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
+        canvas.closePath();
+      }, timeGap * 1000);
+
+      this.#outputSpeaker.triggerAttack(this.markerToNoteFrequency(marker), now + timeGap);
       timeGap += 0.5;
+
+      // Draw black after a timeout. This timeout is incremented by 0.5 from the 'draw yellow' one.
+      setTimeout(() => {
+        canvas.beginPath();
+        canvas.fillStyle = "black";
+        this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
+        canvas.closePath();
+      }, timeGap * 1000);
     });
     this.#outputSpeaker.triggerRelease(allNoteFrequencies, now + timeGap + 0.5);
     timeGap += 0.5;
 
-    // play faster
+    // Play Faster
-    allNoteFrequencies.forEach((freq) => {
+
-      this.#outputSpeaker.triggerAttack(freq, now + timeGap);
+    const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
+    // Draw everything yellow
+    this.#markers.forEach((marker) => {
+      setTimeout(() => {
+        canvas.beginPath();
+        canvas.fillStyle = "yellow";
+        this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
+        canvas.closePath();
+      }, timeGap * 1000);
+    });
+
+    this.#markers.forEach((marker) => {
+      this.#outputSpeaker.triggerAttack(this.markerToNoteFrequency(marker), now + timeGap);
       timeGap += 0.055;
     });
+
     this.#outputSpeaker.triggerRelease(allNoteFrequencies, now + timeGap + 2);
+
+    // Draw everything black
+    this.#markers.forEach((marker) => {
+      setTimeout(
+        () => {
+          canvas.beginPath();
+          canvas.fillStyle = "black";
+          this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
+          canvas.closePath();
+        },
+        (timeGap + 1) * 1000,
+      );
+    });
   }
 
   drawAllMarkers() {