attempt to fix timeline out of sync

static/audioplayer.js

@@ -24,6 +24,8 @@ class SimpleAudioPlayer {
     this.rafId        = null;
     this.abortCtrl    = null;
     this._hasMetadata = false;
+    this._posInterval = null;
+    this._posIntervalMs = 1000;
 
     // Pre-compute icons once
     const fill = getComputedStyle(document.documentElement)
@@ -87,6 +89,21 @@ class SimpleAudioPlayer {
     </svg>`;
   }
 
+  _startPositionSync() {
+    if (this._posInterval) return;
+    this._posInterval = setInterval(() => {
+      if (!this.audio.paused) {
+        this._pushPositionState();
+      }
+    }, this._posIntervalMs);
+  }
+
+  _stopPositionSync() {
+    if (!this._posInterval) return;
+    clearInterval(this._posInterval);
+    this._posInterval = null;
+  }
+
   _bindEvents() {
     this.playBtn.addEventListener('click', () => this.togglePlay());
     if (this.minBtn) {
@@ -95,6 +112,7 @@ class SimpleAudioPlayer {
 
     this.audio.addEventListener('loadstart', () => {
       this._hasMetadata = false;
+      this._stopPositionSync();
       this.timeline.min = 0;
       this.timeline.max = 0;
       this.timeline.value = 0;
@@ -114,6 +132,7 @@ class SimpleAudioPlayer {
     this.audio.addEventListener('play', () => {
       this._updatePlayState();
       this._pushPositionState(true);
+      this._startPositionSync();
     });
 
     this.audio.addEventListener('playing',  () => this._pushPositionState(true));
@@ -121,12 +140,14 @@ class SimpleAudioPlayer {
     this.audio.addEventListener('pause', () => {
       this._updatePlayState();
       this._pushPositionState(true);
+      this._stopPositionSync();
     });
 
     this.audio.addEventListener('ratechange', () => this._pushPositionState(true));
     this.audio.addEventListener('ended', () => {
       this.playBtn.innerHTML = this.icons.play;
       this._pushPositionState(true);
+      this._stopPositionSync();
       if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'paused';
     });
 
@@ -134,7 +155,15 @@ class SimpleAudioPlayer {
     this.audio.addEventListener('timeupdate', () => this.updateTimeline());
 
     // Keep position in sync when page visibility changes
-    document.addEventListener('visibilitychange', () => this._pushPositionState(true));
+    document.addEventListener('visibilitychange', () => {
+      this._pushPositionState(true);
+      if (document.visibilityState === 'visible' && !this.audio.paused) {
+        this._startPositionSync();
+      }
+    });
+
+    window.addEventListener('pageshow', () => this._pushPositionState(true));
+    window.addEventListener('focus', () => this._pushPositionState(true));
 
     // Unified seek input
     this.timeline.addEventListener('input', () => {