fix: LSDV-4572: Audio playback and playhead briefly get out of sync (#1212)

* fix: LSDV-4572: Sound sometimes delayed to playback visual cursor

* sync currentTime with audio currentTime after buffering completes

Author: bmartel

src/lib/AudioUltra/Controls/Player.ts

@@ -197,7 +197,6 @@ export class Player extends Destructable {
 
   private playSource(start?: number, duration?: number) {
     this.stopWatch();
-    this.timestamp = performance.now();
     this.connectSource();
 
     if (!this.audio) return;
@@ -220,17 +219,21 @@ export class Player extends Destructable {
         this.bufferResolve = resolve;
       });
 
-      const promise = this.audio.el.play();
+      const time = this.currentTime;
 
-      // Ensure that the audio can play before invoking the timer updates
-      promise.then(() => {
-        if (this.bufferPromise) {
-          this.bufferPromise.then(() => {
+      this.audio.el.play().then(() => {
+        this.bufferPromise!.then(() => {
+          this.timestamp = performance.now();
+
+          // We need to compensate for the time it took to load the buffer
+          // otherwise the audio will be out of sync of the timer we use to
+          // render updates
+          if (this.audio?.el) {
+            this.currentTime = time;
+            this.audio.el.currentTime = this.currentTime;
             this.watch();
-          });
-        } else {
-          this.watch();
-        }
+          }
+        });
       });
     }
   }

src/lib/AudioUltra/Media/AudioDecoder.ts

@@ -270,10 +270,7 @@ export class AudioDecoder extends Events<AudioDecoderEvents> {
 
     const totalDuration = this.worker.duration;
 
-    // The duration start is offset by 1 second in the actual wasm decoder.
-    // This is to ensure we correctly capture the entire data set for the waveform,
-    // aligning it with the audio data when played back via the media element.
-    let durationOffset = -1;
+    let durationOffset = 0;
 
     while (true) {
       yield new Promise((resolve, reject) => {

src/lib/AudioUltra/Media/MediaLoader.ts

@@ -184,7 +184,7 @@ export class MediaLoader extends Destructable {
         }
       });
 
-      xhr.open('GET', url);
+      xhr.open('GET', url, true);
       xhr.send();
     });
   }

src/lib/AudioUltra/Media/WaveformAudio.ts

@@ -112,6 +112,7 @@ export class WaveformAudio extends Events<WaveformAudioEvents> {
     delete this.decoderPromise;
     this.decoder?.destroy();
     delete this.decoder;
+    this.el?.removeEventListener('error', this.mediaReady);
     this.el?.removeEventListener('canplaythrough', this.mediaReady);
     this.el?.remove();
     delete this.el;
@@ -176,7 +177,6 @@ export class WaveformAudio extends Events<WaveformAudioEvents> {
 
     this.el = document.createElement('audio');
     this.el.preload = 'auto';
-    this.el.muted = true;
     this.el.setAttribute('data-testid', 'waveform-audio');
     this.el.style.display = 'none';
     document.body.appendChild(this.el);
@@ -198,9 +198,8 @@ export class WaveformAudio extends Events<WaveformAudioEvents> {
       if (this.mediaResolve) {
         this.mediaResolve?.();
         this.mediaResolve = undefined;
-        await this.forceBuffer();
-        this.invoke('canplay');
       }
+      this.invoke('canplay');
     }
   };
 
@@ -211,27 +210,6 @@ export class WaveformAudio extends Events<WaveformAudioEvents> {
     if (!this.src || !this.el) return;
 
     this.el.src = this.src;
-    this.el.load();
-  }
-
-  /**
-   * In order for the audio to playback sound immediately, we need to force the browser to buffer the audio.
-   * This works by just playing the audio and then immediately pausing it.
-   */
-  private async forceBuffer() {
-    if (!this.el) return;
-
-    try {
-      await this.el.play();
-      this.el.pause();
-    } catch {
-      // ignore
-    } finally {
-      if (this.el) {
-        this.el.currentTime = 0;
-        this.el.muted = false;
-      }
-    }
   }
 
   private createAudioDecoder() {