adding the logic for a rewind button

src/TransportNode.js

@@ -73,6 +73,7 @@ export class TransportNode extends AudioWorkletNode {
         this.startTime = null;
         this.elapsedTime = null;
         this.app.clock.tick = 0;
+        this.$clock.innerHTML = `[${1} | ${1} | ${zeroPad(1, '2')}]`;
         this.port.postMessage("stop");
     }
 

src/main.ts

@@ -58,6 +58,10 @@ export class Editor {
     document.getElementById("pause-button-1") as HTMLButtonElement,
     document.getElementById("pause-button-2") as HTMLButtonElement,
   ];
+  stop_buttons: HTMLButtonElement[] = [
+    document.getElementById("stop-button-1") as HTMLButtonElement,
+    document.getElementById("stop-button-2") as HTMLButtonElement,
+  ];
   clear_buttons: HTMLButtonElement[] = [
     document.getElementById("clear-button-1") as HTMLButtonElement,
     document.getElementById("clear-button-2") as HTMLButtonElement,
@@ -186,6 +190,14 @@ export class Editor {
         this.setButtonHighlighting("pause", true);
         this.clock.pause();
       }
+
+      if (event.ctrlKey && event.key === "r") {
+        event.preventDefault();
+        this.setButtonHighlighting("stop", true);
+        this.clock.stop();
+      }
+
+
       if (event.ctrlKey && event.key === "p") {
         event.preventDefault();
         this.setButtonHighlighting("play", true);
@@ -235,23 +247,25 @@ export class Editor {
         this.openSettingsModal();
       }
 
-      // Switch to local files
       if (event.ctrlKey && event.key === "l") {
         event.preventDefault();
         this.changeModeFromInterface("local");
         this.view.focus();
       }
+
       if (event.ctrlKey && event.key === "g") {
         event.preventDefault();
         this.changeModeFromInterface("global");
         this.view.focus();
       }
+
       if (event.ctrlKey && event.key === "i") {
         event.preventDefault();
         this.changeModeFromInterface("init");
         this.changeToLocalBuffer(0);
         this.view.focus();
       }
+
       [112, 113, 114, 115, 116, 117, 118, 119, 120].forEach(
         (keycode, index) => {
           if (event.keyCode === keycode) {
@@ -316,6 +330,13 @@ export class Editor {
       });
     });
 
+    this.stop_buttons.forEach((button) => {
+      button.addEventListener("click", () => {
+        this.setButtonHighlighting("stop", true);
+        this.clock.stop();
+      });
+    });
+
     this.local_button.addEventListener("click", () =>
       this.changeModeFromInterface("local")
     );
@@ -459,13 +480,14 @@ export class Editor {
   }
 
   setButtonHighlighting(
-    button: "play" | "pause" | "clear",
+    button: "play" | "pause" | "stop" | "clear",
     highlight: boolean
   ) {
     const possible_selectors = [
       '[id^="play-button-"]',
       '[id^="pause-button-"]',
       '[id^="clear-button-"]',
+      '[id^="stop-button-"]',
     ];
     let selector: number;
     switch (button) {
@@ -478,6 +500,9 @@ export class Editor {
       case "clear":
         selector = 2;
         break;
+      case "stop": 
+        selector = 3;
+        break;
     }
     document
       .querySelectorAll(possible_selectors[selector])