Fix delay issue by moving things from TransportProcessor

src/API.ts

@@ -115,6 +115,7 @@ export class UserAPI {
         ? code
         : (this.app.selectedExample as string);
     }
+    this.stop();
     this.play();
   };
 
@@ -125,7 +126,7 @@ export class UserAPI {
       current_universe.example.candidate! = "";
       current_universe.example.committed! = "";
     }
-    this.pause();
+    this.stop();
   };
 
   _playDocExampleOnce = (code?: string) => {
@@ -134,6 +135,7 @@ export class UserAPI {
       current_universe.example.candidate! = "";
       current_universe.example.committed! = "";
     }
+    this.stop();
     this.play();
     this.app.exampleIsPlaying = true;
     evaluateOnce(this.app, code as string);
@@ -206,13 +208,11 @@ export class UserAPI {
 
   public pause = (): void => {
     this.app.setButtonHighlighting("pause", true);
-    this.MidiConnection.sendStopMessage();
     this.app.clock.pause();
   };
 
   public stop = (): void => {
     this.app.setButtonHighlighting("stop", true);
-    this.MidiConnection.sendStopMessage();
     this.app.clock.stop();
   };
   silence = this.stop;

src/Clock.ts

@@ -23,17 +23,19 @@ export class Clock {
    *
    * @param app - The main application instance
    * @param ctx - The current AudioContext used by app
-   * @param elapsed - Time elapsed since play been pressed
    * @param transportNode - The TransportNode helper
    * @param bpm - The current beats per minute value
    * @param time_signature - The time signature
    * @param time_position - The current time position
    * @param ppqn - The pulses per quarter note
    * @param tick - The current tick since origin
+   * @param running - Is the clock running?
+   * @param lastPauseTime - The last time the clock was paused
+   * @param lastPlayPressTime - The last time the clock was started
+   * @param totalPauseTime - The total time the clock has been paused / stopped
    */
 
   ctx: AudioContext;
-  elapsed: number;
   logicalTime: number;
   transportNode: TransportNode | null;
   private _bpm: number;
@@ -42,12 +44,13 @@ export class Clock {
   private _ppqn: number;
   tick: number;
   running: boolean;
-  messageSent: number;
+  lastPauseTime: number;
+  lastPlayPressTime: number;
+  totalPauseTime: number;
 
   constructor(public app: Editor, ctx: AudioContext) {
     this.time_position = { bar: 0, beat: 0, pulse: 0 };
     this.time_signature = [4, 4];
-    this.elapsed = 0;
     this.logicalTime = 0;
     this.tick = 0;
     this._bpm = 120;
@@ -55,7 +58,9 @@ export class Clock {
     this.transportNode = null;
     this.ctx = ctx;
     this.running = true;
-    this.messageSent = 0;
+    this.lastPauseTime = 0;
+    this.lastPlayPressTime = 0;
+    this.totalPauseTime = 0;
     ctx.audioWorklet
       .addModule(TransportProcessor)
       .then((e) => {
@@ -148,8 +153,7 @@ export class Clock {
 
   set bpm(bpm: number) {
     if (bpm > 0 && this._bpm !== bpm) {
-      this.messageSent = this.app.audioContext.currentTime;
+      this.transportNode?.setBPM(bpm);
-      this.transportNode?.setBPM(bpm, this.messageSent);
       this._bpm = bpm;
     }
   }
@@ -159,7 +163,7 @@ export class Clock {
   }
 
   get realTime(): number {
-    return this.elapsed;
+    return this.app.audioContext.currentTime - this.lastPlayPressTime - this.totalPauseTime;
   }
 
   get deviation(): number {
@@ -169,8 +173,7 @@ export class Clock {
   set ppqn(ppqn: number) {
     if (ppqn > 0 && this._ppqn !== ppqn) {
       this._ppqn = ppqn;
-      this.messageSent = this.app.audioContext.currentTime;
+      this.transportNode?.setPPQN(ppqn);
-      this.transportNode?.setPPQN(ppqn, this.messageSent);
     }
   }
 
@@ -212,14 +215,12 @@ export class Clock {
      */
     this.app.audioContext.resume();
     this.running = true;
-    this.messageSent = this.app.audioContext.currentTime;
     this.app.api.MidiConnection.sendStartMessage();
+    this.lastPlayPressTime = this.app.audioContext.currentTime;
     if (this.tick > 0) {
-      this.transportNode?.resume(this.messageSent);
+      this.totalPauseTime += this.app.audioContext.currentTime - this.lastPauseTime;
-    } else {
-      this.transportNode?.start(this.messageSent);
     }
-
+    this.transportNode?.start();
   }
 
   public pause(): void {
@@ -229,9 +230,9 @@ export class Clock {
      * @remark also sends a MIDI message if a port is declared
      */
     this.running = false;
-    this.messageSent = this.app.audioContext.currentTime;
+    this.transportNode?.pause();
-    this.transportNode?.pause(this.messageSent);
     this.app.api.MidiConnection.sendStopMessage();
+    this.lastPauseTime = this.app.audioContext.currentTime;
   }
 
   public stop(): void {
@@ -243,10 +244,9 @@ export class Clock {
     this.running = false;
     this.app.clock.tick = 0;
     this.logicalTime = 0;
-    this.elapsed = 0;
+    this.totalPauseTime = 0;
     this.time_position = { bar: 0, beat: 0, pulse: 0 };
     this.app.api.MidiConnection.sendStopMessage();
-    this.messageSent = this.app.audioContext.currentTime;
+    this.transportNode?.stop();
-    this.transportNode?.stop(this.messageSent);
   }
 }

src/TransportNode.js

@@ -13,9 +13,7 @@ export class TransportNode extends AudioWorkletNode {
   /** @type {(this: MessagePort, ev: MessageEvent<any>) => any} */
   handleMessage = (message) => {
     if(message.data) {
-      if (message.data.type === "elapsed") {
+      if (message.data.type === "bang") {
-        this.app.clock.elapsed = message.data.value
-      } else if (message.data.type === "bang") {
         if(this.app.clock.running) {
           if (this.app.settings.send_clock) {
             this.app.api.MidiConnection.sendMidiClock();
@@ -32,38 +30,36 @@ export class TransportNode extends AudioWorkletNode {
             tryEvaluate(this.app, this.app.global_buffer);
           }
           this.app.clock.incrementTick(message.data.bpm);
-        } else {
-          console.log("STILLLLLLLLLLLLLLLL BANGING!");
         }
       }
     }
   };
 
-  start(sentAt) {
+  start() {
-    this.port.postMessage({ type: "start", sentAt: sentAt});
+    this.port.postMessage({ type: "start" });
   }
 
-  pause(sentAt) {
+  pause() {
-    this.port.postMessage({ type: "pause", sentAt: sentAt});
+    this.port.postMessage({ type: "pause" });
   }
 
-  resume(sentAt) {
+  resume() {
-    this.port.postMessage({ type: "resume", sentAt: sentAt });
+    this.port.postMessage({ type: "resume" });
   }
 
-  setBPM(bpm, sentAt) {
+  setBPM(bpm) {
-    this.port.postMessage({ type: "bpm", value: bpm, sentAt: sentAt });
+    this.port.postMessage({ type: "bpm", value: bpm });
   }
 
-  setPPQN(ppqn, sentAt) {
+  setPPQN(ppqn) {
-    this.port.postMessage({ type: "ppqn", value: ppqn, sentAt: sentAt });
+    this.port.postMessage({ type: "ppqn", value: ppqn });
   }
 
-  setNudge(nudge, sentAt) {
+  setNudge(nudge) {
-    this.port.postMessage({ type: "nudge", value: nudge, sentAt: sentAt });
+    this.port.postMessage({ type: "nudge", value: nudge });
   }
 
-  stop(sentAt) {
+  stop() {
-    this.port.postMessage({type: "stop", sentAt: sentAt});
+    this.port.postMessage({type: "stop" });
   }
 }

src/TransportProcessor.js

@@ -9,8 +9,6 @@ class TransportProcessor extends AudioWorkletProcessor {
     this.bpm = 120;
     this.ppqn = 48;
     this.currentPulsePosition = 0;
-    this.totalPausedTime = 0;
-    this.lastPauseTime = null;
   }
 
   handleMessage = (message) => {
@@ -18,18 +16,8 @@ class TransportProcessor extends AudioWorkletProcessor {
       this.port.postMessage(message.data);
     } else if (message.data.type === "start") {
       this.started = true;
-      this.lastPlayPressTime = currentTime;
-      this.totalPausedTime = 0;
-
-    } else if (message.data.type === "resume") {
-      this.started = true;
-      if (this.lastPauseTime !== null) {
-        this.totalPausedTime += currentTime - this.lastPauseTime;
-        this.lastPauseTime = null;
-      }
     } else if (message.data.type === "pause") {
       this.started = false;
-      this.lastPauseTime = currentTime;
     } else if (message.data.type === "stop") {
       this.started = false;
     } else if (message.data.type === 'bpm') {
@@ -40,7 +28,6 @@ class TransportProcessor extends AudioWorkletProcessor {
     } else if (message.data.type === 'nudge') {
       this.nudge = message.data.value;
     }
-    console.log("Message delay: ", currentTime - message.data.sentAt);
   }
 
   process(inputs, outputs, parameters) {
@@ -48,13 +35,9 @@ class TransportProcessor extends AudioWorkletProcessor {
       const adjustedCurrentTime = currentTime + (this.nudge / 100);
       const beatNumber = adjustedCurrentTime / (60 / this.bpm);
       const currentPulsePosition = Math.ceil(beatNumber * this.ppqn);
-      const elapsedTime = (currentTime - this.lastPlayPressTime) - this.totalPausedTime;
-      this.port.postMessage({ type: "elapsed", value: elapsedTime });
       if (currentPulsePosition > this.currentPulsePosition) {
         this.currentPulsePosition = currentPulsePosition;
         this.port.postMessage({ type: "bang", bpm: this.bpm });
-      } else {
-        console.log("No bang", currentPulsePosition, this.currentPulsePosition);
       }
     }
     return true;