adding elapsed time, missing pause/resume mechanism

src/Clock.ts

@@ -23,6 +23,7 @@ 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
@@ -32,6 +33,7 @@ export class Clock {
    */
 
   ctx: AudioContext;
+  elapsed: number
   transportNode: TransportNode | null;
   private _bpm: number;
   time_signature: number[];
@@ -42,6 +44,7 @@ export class Clock {
   constructor(public app: Editor, ctx: AudioContext) {
     this.time_position = { bar: -1, beat: -1, pulse: -1 };
     this.time_signature = [4, 4];
+    this.elapsed = 0;
     this.tick = -1;
     this._bpm = 120;
     this._ppqn = 48;

src/TransportNode.js

@@ -12,6 +12,9 @@ export class TransportNode extends AudioWorkletNode {
 
   /** @type {(this: MessagePort, ev: MessageEvent<any>) => any} */
   handleMessage = (message) => {
+    if (message.data && message.data.type === "elapsed") {
+      this.app.clock.elapsed = message.data.value
+    }
     if (message.data && message.data.type === "bang") {
       if (this.app.settings.send_clock)
         this.app.api.MidiConnection.sendMidiClock();
@@ -20,9 +23,8 @@ export class TransportNode extends AudioWorkletNode {
         this.app.clock.tick
       );
       this.app.clock.time_position = futureTimeStamp;
-      this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${
+      this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${futureTimeStamp.beat + 1
-        futureTimeStamp.beat + 1
+        }:${zeroPad(futureTimeStamp.pulse, 2)} / ${this.app.clock.bpm}`;
-      }:${zeroPad(futureTimeStamp.pulse, 2)} / ${this.app.clock.bpm}`;
       if (this.app.exampleIsPlaying) {
         tryEvaluate(this.app, this.app.example_buffer);
       } else {

src/TransportProcessor.js

@@ -16,6 +16,7 @@ class TransportProcessor extends AudioWorkletProcessor {
       this.port.postMessage(message.data);
     } else if (message.data === "start") {
       this.started = true;
+      this.lastPlayPressTime = currentTime;
     } else if (message.data === "pause") {
       this.started = false;
     } else if (message.data === "stop") {
@@ -36,6 +37,8 @@ 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.port.postMessage({ type: "elapsed", value: elapsedTime })
       if (currentPulsePosition > this.currentPulsePosition) {
         this.currentPulsePosition = currentPulsePosition;
         this.port.postMessage({ type: "bang" });