Changeset 421046c in Klonkt

Timestamp:

07/02/2026 01:21:34 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d039264

Parents:

a369029

Message:

fix(audio): gapless MSE playback - background auto-advance survives on Android

Root cause of "next track plays 1 second, then pauses and the media
notification closes" on backgrounded mobile Chrome/PWA: every track
change did pause() + audio.src=<new blob> + load() + play(), which the
browser treats as a NEW playback session - and Chrome's background media
policy pauses new sessions started in the background. Only a CONTINUING
session may keep playing.

The player now has two engines:

• MSE chain (Chrome/Firefox/Android): one MediaSource + one 'audio/mpeg' SourceBuffer (every track is uniform transcoder mp3). The next track's bytes are appended into the same buffer, so the whole queue is one continuous playback session; auto-advance is just the timeline flowing past a segment boundary - no pause/src/load/play at all. Track chrome, per-track time display, seek, lock-screen position state and session save/restore all work in track coordinates via a segment table. Played data is pruned (~2 tracks buffered), ID3 tags are stripped between appends, QuotaExceeded evicts and retries.
• Blob fallback (iOS Safari - no MSE; or runtime MSE failure): the previous per-track objectURL behaviour, now fed from shared byte fetches. An audio error while the MSE chain is active permanently falls back to blobs for the session and retries the same track.

Manual actions (play/next/prev/queue click/restore) start a fresh chain -
those happen in the foreground where a new session is allowed.

Verified in-browser (desktop Chrome, two 8s test tones): auto-advance
crosses the boundary with ZERO pause/play events (old engine: one pair
per track), per-track time display correct, manual next resets the
chain, in-track seek works, queue wrap-around is gapless, no console
errors.

• src/assets/js/audio-player.js - the two-engine pipeline (fetchTrackBytes, MSE chain: chainStart/appendSegment/ensureNextAppended/pruneBuffer/ maybeCrossBoundary/displayTimes; applyBlobBytes fallback; updateTrackChrome extraction; MediaSession positionState)
• src/views/shell.ejs - cache-buster v31 -> v32
• CHANGELOG(.nl/.de).md - user-facing entry under Unreleased (3 languages)

Co-Authored-By: Claude <noreply@…>

Files:

• CHANGELOG.de.md (modified) (1 diff)
• CHANGELOG.md (modified) (1 diff)
• CHANGELOG.nl.md (modified) (1 diff)
• src/assets/js/audio-player.js (modified) (16 diffs)
• src/views/shell.ejs (modified) (1 diff)

CHANGELOG.de.md

@@ -5 +5 @@
 
 ## [Unreleased]
+
+### Behoben
+- **Musik läuft auf Android im Hintergrund weiter.** Wenn ein Titel endete,
+  während das Handy gesperrt oder die App im Hintergrund war, startete der
+  nächste Titel und stoppte nach einer Sekunde wieder. Der Player führt die
+  Warteschlange jetzt als einen durchgehenden Stream zu, sodass das
+  Weiterspringen zum nächsten Titel nicht mehr als "neue" Wiedergabe zählt,
+  die der Browser pausieren darf.
 
 ## [1.3.0] — 2026-07-02

CHANGELOG.md

@@ -5 +5 @@
 
 ## [Unreleased]
+
+### Fixed
+- **Music keeps playing in the background on Android.** When a track ended while
+  your phone was locked or the app was in the background, the next track would
+  start and stop again after a second. The player now feeds the whole queue as
+  one continuous stream, so auto-advancing to the next track no longer counts
+  as "new" playback that the browser is allowed to pause.
 
 ## [1.3.0] — 2026-07-02

CHANGELOG.nl.md

@@ -5 +5 @@
 
 ## [Unreleased]
+
+### Opgelost
+- **Muziek blijft op Android doorspelen in de achtergrond.** Als een nummer
+  afliep terwijl je telefoon op slot zat of de app in de achtergrond stond,
+  startte het volgende nummer en stopte het na een seconde weer. De speler
+  voert de wachtrij nu als één doorlopende stream aan, waardoor het doorgaan
+  naar het volgende nummer niet meer telt als "nieuw" afspelen dat de browser
+  mag pauzeren.
 
 ## [1.3.0] — 2026-07-02

src/assets/js/audio-player.js

@@ -158 +158 @@
   let isPlaying = false;
   let albumName = '';
-  // Blob playback state. We fetch each track's bytes and play from a blob:
-  // object URL — no plain media URL is ever exposed to the page. currentObjectUrl
-  // is revoked when we move on, so we don't leak one Blob per track in memory.
+  // Playback pipeline. We fetch each track's bytes ourselves (X-Audio-Player
+  // gate; no plain media URL is ever exposed to the page) and feed them to the
+  // <audio> element through one of two engines:
+  //
+  //  1. MSE chain (Chrome/Firefox/Android): ONE MediaSource + SourceBuffer
+  //     ('audio/mpeg', sequence mode — every track is uniform transcoder mp3).
+  //     The next track's bytes are APPENDED into the same buffer, so the whole
+  //     queue is one continuous playback session. That is what keeps a
+  //     backgrounded tab/PWA playing across track changes: Chrome's background
+  //     media policy pauses NEW playback sessions started in the background
+  //     (the old per-track src-swap + load() + play()), but never interrupts a
+  //     continuing one. A track change becomes a timeline position, not a swap.
+  //  2. Blob fallback (iOS Safari — no MSE; or MSE failed at runtime): one
+  //     objectURL per track, the previous behaviour.
   let currentObjectUrl = null;
   // Monotonic load token: a fast prev/next can fire several loads before an
-  // earlier fetch resolves. Only the latest load may set audio.src.
+  // earlier fetch resolves. Only the latest load may touch the audio pipeline.
   let loadSeq = 0;
-  // Next-track prefetch. While the current track plays we download the *next*
-  // track's bytes into a held blob, so `ended` → next() can swap src instantly
-  // (no silent gap, and no long async window where the browser's autoplay
-  // activation can lapse and reject play()). At most one track ahead is held.
-  // Shape: { url, objUrl }  — objUrl is null while the fetch is still in flight.
+  // Next-track prefetch (blob engine; the MSE engine appends ahead instead).
+  // Shape: { url, bytes } — bytes is null while the fetch is still in flight.
   let preload = null;
+  // ── MSE chain state ──
+  const MSE_SUPPORTED = !!(window.MediaSource && MediaSource.isTypeSupported && MediaSource.isTypeSupported('audio/mpeg'));
+  let mseFailed = false;               // runtime bail → blob engine for the rest of this session
+  const useMse = () => MSE_SUPPORTED && !mseFailed;
+  let ms = null;                       // MediaSource
+  let sb = null;                       // SourceBuffer
+  let chain = [];                      // appended segments: { qIndex, start, end } (timeline seconds)
+  let chainFetching = false;           // a fetch+append for the NEXT track is in flight
+  let sbOps = Promise.resolve();       // serializes SourceBuffer operations
 
   // Hide initially
@@ -190 +207 @@
   }
 
-  // Fetch the track bytes and hand back a blob: object URL. The X-Audio-Player
-  // header + same-origin credentials get us past the stream route's access gate.
+  // Fetch the track bytes (ArrayBuffer). The X-Audio-Player header +
+  // same-origin credentials get us past the stream route's access gate.
   // Retries a few times with backoff: a single transient network blip used to
   // bump the error counter and SKIP the song (auto-advance past it). Now one
   // hiccup just costs a retry, and we only give up after genuinely failing.
-  async function fetchAsObjectUrl(url, attempts) {
+  async function fetchTrackBytes(url, attempts) {
     attempts = attempts || 1;
     let lastErr;
@@ -205 +222 @@
         });
         if (!r.ok) throw new Error('HTTP ' + r.status);
-        const blob = await r.blob();
-        return URL.createObjectURL(blob);
+        return await r.arrayBuffer();
       } catch (e) {
         lastErr = e;
@@ -217 +233 @@
   }
 
-  // Apply a ready blob URL to the <audio> element. Single source of truth for
-  // "swap the playing source": used by both the cached-preload path and the
-  // fresh-fetch path so there's one place that touches audio.src.
-  function applyBlob(objUrl, autoplay, mySeq) {
-    if (mySeq !== loadSeq) { try { URL.revokeObjectURL(objUrl); } catch (e) {} return; }  // superseded
+  // Blob fallback engine: wrap the bytes in an objectURL and swap audio.src.
+  function applyBlobBytes(bytes, autoplay, mySeq) {
+    if (mySeq !== loadSeq) return;  // superseded
+    const objUrl = URL.createObjectURL(new Blob([bytes], { type: 'audio/mpeg' }));
     root.classList.remove('audio-loading');
     // Free the previously-playing track's blob — otherwise each track leaks a
@@ -248 +263 @@
   }
 
-  // Discard any held/in-flight preload and free its blob if resolved.
-  function dropPreload() {
-    if (preload && preload.objUrl) { try { URL.revokeObjectURL(preload.objUrl); } catch (e) {} }
-    preload = null;
-  }
+  // Discard any held/in-flight preload (plain bytes now — GC handles them).
+  function dropPreload() { preload = null; }
 
   // Prefetch the *next* track's bytes in the background. Idempotent: re-calling
   // while the same track is already cached / in flight is a no-op. Called from
-  // the `playing` event so the network is otherwise idle.
+  // the `playing` event so the network is otherwise idle. Blob engine only —
+  // the MSE engine "preloads" by appending ahead (ensureNextAppended).
   function preloadNext() {
     if (queue.length < 2) return;
@@ -263 +276 @@
     if (!t || !t.url) return;
     if (preload && preload.url === t.url) return;  // already held or in flight
-    dropPreload();                                  // different track queued before → free it
-    const marker = { url: t.url, objUrl: null };
+    const marker = { url: t.url, bytes: null };
     preload = marker;
-    fetchAsObjectUrl(t.url, 2).then((obj) => {
-      // Only keep it if this is still the track we want next; otherwise free it.
-      if (preload === marker) { marker.objUrl = obj; }
-      else { try { URL.revokeObjectURL(obj); } catch (e) {} }
+    fetchTrackBytes(t.url, 2).then((bytes) => {
+      // Only keep it if this is still the track we want next.
+      if (preload === marker) marker.bytes = bytes;
     }).catch(() => { if (preload === marker) preload = null; });
+  }
+
+  // ============================================================
+  // 4a. MSE chain engine — one continuous playback session
+  // ============================================================
+  // All tracks are uniform transcoder mp3 (192kbps), so raw frames can be
+  // appended back-to-back into a single 'audio/mpeg' SourceBuffer (its
+  // byte-stream format generates continuous timestamps — sequence mode).
+  // Auto-advance = playback simply flowing into the next track's region.
+
+  // Strip ID3v2 (leading) / ID3v1 (trailing) tags: tag bytes between two
+  // appended tracks would glitch the MPEG frame parser.
+  function stripId3(buf) {
+    const u8 = new Uint8Array(buf);
+    let start = 0, end = u8.length;
+    if (end > 10 && u8[0] === 0x49 && u8[1] === 0x44 && u8[2] === 0x33) {  // "ID3"
+      const size = ((u8[6] & 0x7f) << 21) | ((u8[7] & 0x7f) << 14) | ((u8[8] & 0x7f) << 7) | (u8[9] & 0x7f);
+      const skip = 10 + size + ((u8[5] & 0x10) ? 10 : 0);  // +10 when a footer is flagged
+      if (skip < end) start = skip;
+    }
+    if (end - start > 128 && u8[end - 128] === 0x54 && u8[end - 127] === 0x41 && u8[end - 126] === 0x47) end -= 128;  // "TAG"
+    return (start === 0 && end === u8.length) ? buf : buf.slice(start, end);
+  }
+
+  function teardownChain() {
+    chain = [];
+    chainFetching = false;
+    sbOps = Promise.resolve();
+    sb = null;
+    ms = null;
+  }
+
+  // Serialize a SourceBuffer operation (append/remove): they throw if issued
+  // while the buffer is still updating, so everything funnels through a queue.
+  function sbRun(fn) {
+    const run = () => new Promise((resolve, reject) => {
+      if (!sb || !ms || ms.readyState !== 'open') return resolve();
+      const ok  = () => { cleanup(); resolve(); };
+      const err = (e) => { cleanup(); reject(e); };
+      function cleanup() { sb.removeEventListener('updateend', ok); sb.removeEventListener('error', err); }
+      sb.addEventListener('updateend', ok);
+      sb.addEventListener('error', err);
+      try { fn(); } catch (e) { cleanup(); reject(e); }
+    });
+    const p = sbOps.then(run, run);
+    sbOps = p.catch(() => {});
+    return p;
+  }
+
+  // Append one track's bytes as the next segment of the chain.
+  async function appendSegment(qIndex, bytes, mySeq) {
+    const clean = stripId3(bytes);
+    try {
+      await sbRun(() => sb.appendBuffer(clean));
+    } catch (e) {
+      if (e && e.name === 'QuotaExceededError' && chain.length > 1) {
+        // Evict already-played data and retry once.
+        const seg = currentSegment();
+        if (seg && seg.start > 1) {
+          await sbRun(() => sb.remove(0, seg.start - 0.5));
+          chain = chain.filter((s) => s.end > seg.start - 0.5);
+        }
+        await sbRun(() => sb.appendBuffer(clean));
+      } else {
+        throw e;
+      }
+    }
+    if (mySeq !== loadSeq || !sb) return;
+    const buffered = sb.buffered;
+    const chainEnd = buffered.length ? buffered.end(buffered.length - 1) : 0;
+    const start = chain.length ? chain[chain.length - 1].end : (buffered.length ? buffered.start(0) : 0);
+    chain.push({ qIndex, start, end: chainEnd });
+    if (queue.length === 1 && ms && ms.readyState === 'open') {
+      // Single-track queue: close the stream so `ended` fires (which replays
+      // it, matching the old engine's behaviour).
+      try { ms.endOfStream(); } catch (e) {}
+    }
+  }
+
+  // Keep exactly one full track appended ahead of the one playing.
+  function ensureNextAppended() {
+    if (!useMse() || !sb || !ms || ms.readyState !== 'open' || chainFetching) return;
+    if (queue.length < 2 || !chain.length) return;
+    const seg = currentSegment();
+    if (!seg || chain.length - 1 - chain.indexOf(seg) >= 1) return;  // already one ahead
+    const nextIdx = (chain[chain.length - 1].qIndex + 1) % queue.length;
+    const t = queue[nextIdx];
+    if (!t || !t.url) return;
+    chainFetching = true;
+    const mySeq = loadSeq;
+    const bytesP = (preload && preload.url === t.url && preload.bytes)
+      ? Promise.resolve(preload.bytes)
+      : fetchTrackBytes(t.url, 2);
+    bytesP.then((bytes) => {
+      if (mySeq !== loadSeq) return;
+      if (preload && preload.url === t.url) preload = null;
+      return appendSegment(nextIdx, bytes, mySeq);
+    }).catch((e) => {
+      console.warn('[pcms-audio] next-track append failed', e);
+    }).finally(() => { chainFetching = false; });
+  }
+
+  // Drop played-out data so the buffer holds ~2 tracks at most.
+  function pruneBuffer(curSeg) {
+    if (!useMse() || !sb || !ms || ms.readyState !== 'open') return;
+    const cut = curSeg.start - 0.5;
+    if (cut <= 1) return;
+    sbRun(() => sb.remove(0, cut)).catch(() => {});
+    chain = chain.filter((s) => s.end > cut);
+  }
+
+  function currentSegment() {
+    const t = audio.currentTime || 0;
+    for (let i = 0; i < chain.length; i++) if (t < chain[i].end - 0.05) return chain[i];
+    return chain[chain.length - 1] || null;
+  }
+
+  // Playback flowed across a track boundary (the gapless auto-advance):
+  // update chrome/metadata, top the buffer up, evict what's been played.
+  function maybeCrossBoundary() {
+    const seg = currentSegment();
+    if (!seg || seg.qIndex === currentIndex) return;
+    currentIndex = seg.qIndex;
+    const t = queue[currentIndex];
+    if (t) {
+      console.log('[pcms-audio] gapless auto-advance →', t.title);
+      updateTrackChrome(t);
+    }
+    ensureNextAppended();
+    pruneBuffer(seg);
+    updatePositionState();
+    savePlayerState();
+  }
+
+  // Start a fresh chain at queue[index]. Manual actions only (start/jump/
+  // prev/next/restore) — those happen in the foreground, where starting a
+  // new playback session is allowed.
+  function chainStart(index, autoplay, mySeq, bytes) {
+    teardownChain();
+    ms = new MediaSource();
+    const msUrl = URL.createObjectURL(ms);
+    if (currentObjectUrl && currentObjectUrl !== msUrl) {
+      try { URL.revokeObjectURL(currentObjectUrl); } catch (e) {}
+    }
+    currentObjectUrl = msUrl;
+    try { audio.pause(); } catch (e) {}
+    audio.src = msUrl;
+    try { audio.load(); } catch (e) {}
+    const bailToBlob = (e) => {
+      console.warn('[pcms-audio] MSE unavailable, using blob playback', e);
+      mseFailed = true;
+      teardownChain();
+      if (mySeq === loadSeq) applyBlobBytes(bytes, autoplay, mySeq);
+    };
+    ms.addEventListener('sourceopen', () => {
+      if (mySeq !== loadSeq || !ms) return;
+      try {
+        sb = ms.addSourceBuffer('audio/mpeg');
+      } catch (e) { return bailToBlob(e); }
+      appendSegment(index, bytes, mySeq).then(() => {
+        if (mySeq !== loadSeq) return;
+        // Session-restore: land at the saved in-track position.
+        if (pendingSeek > 0 && chain.length) {
+          const seg = chain[0];
+          try { audio.currentTime = Math.min(pendingSeek, (seg.end - seg.start) - 0.25); } catch (e) {}
+          pendingSeek = 0;
+        }
+        ensureNextAppended();
+      }).catch(bailToBlob);
+    }, { once: true });
+    if (autoplay) play();
+  }
+
+  // Current position/duration in TRACK coordinates (the MSE timeline is the
+  // whole chain; the UI always shows the single playing track).
+  function displayTimes() {
+    if (useMse() && chain.length) {
+      const seg = currentSegment();
+      if (seg) return { cur: Math.max(0, (audio.currentTime || 0) - seg.start), dur: seg.end - seg.start };
+    }
+    return { cur: audio.currentTime || 0, dur: audio.duration };
   }
 
@@ -310 +502 @@
   }
 
-  function loadTrack(index, autoplay, metaOnly) {
-    if (!queue[index]) {
-      console.warn('[pcms-audio] loadTrack: no track at index', index);
-      return;
-    }
-    currentIndex = index;
-    const t = queue[index];
-    if (!t.url) {
-      console.error('[pcms-audio] track has no url', t);
-      return;
-    }
-    console.log('[pcms-audio] loading', t.title, t.url, metaOnly ? '(meta only)' : '');
-    // Metadata + chrome update synchronously so the UI reacts instantly while
-    // the bytes download.
+  // All the visible per-track chrome: titles, covers, queue highlight, media
+  // session metadata. Called from loadTrack AND from the gapless boundary-cross.
+  function updateTrackChrome(t) {
     titleEl.textContent  = t.title  || 'Untitled';
     artistEl.textContent = t.artist || '';
@@ -336 +517 @@
     markPlaying(t.id);
     updateMediaMetadata(t);
+  }
+
+  function loadTrack(index, autoplay, metaOnly) {
+    if (!queue[index]) {
+      console.warn('[pcms-audio] loadTrack: no track at index', index);
+      return;
+    }
+    currentIndex = index;
+    const t = queue[index];
+    if (!t.url) {
+      console.error('[pcms-audio] track has no url', t);
+      return;
+    }
+    console.log('[pcms-audio] loading', t.title, t.url, metaOnly ? '(meta only)' : '');
+    // Metadata + chrome update synchronously so the UI reacts instantly while
+    // the bytes download.
+    updateTrackChrome(t);
 
     if (metaOnly) return;
@@ -342 +540 @@
 
     // Fast path: the bytes for this exact track were already prefetched while
-    // the previous track played → swap in instantly, no gap, no fetch window.
-    if (preload && preload.url === t.url && preload.objUrl) {
-      const obj = preload.objUrl;
-      preload = null;  // ownership moves to applyBlob (becomes currentObjectUrl)
-      applyBlob(obj, autoplay, mySeq);
-      return;
-    }
-
-    // Not preloaded (or preload still in flight) → drop any stale preload and
-    // fetch fresh, retrying transient failures before giving up.
-    dropPreload();
-    root.classList.add('audio-loading');
-    fetchAsObjectUrl(t.url, 3)
-      .then((objUrl) => applyBlob(objUrl, autoplay, mySeq))
-      .catch((err) => onLoadError(err, mySeq));
+    // the previous track played → no gap, no fetch window.
+    let bytesP;
+    if (preload && preload.url === t.url && preload.bytes) {
+      bytesP = Promise.resolve(preload.bytes);
+      preload = null;
+    } else {
+      // Not preloaded (or still in flight) → drop any stale preload and fetch
+      // fresh, retrying transient failures before giving up.
+      dropPreload();
+      root.classList.add('audio-loading');
+      bytesP = fetchTrackBytes(t.url, 3);
+    }
+    bytesP.then((bytes) => {
+      if (mySeq !== loadSeq) return;
+      root.classList.remove('audio-loading');
+      if (useMse()) chainStart(index, autoplay, mySeq, bytes);
+      else applyBlobBytes(bytes, autoplay, mySeq);
+    }).catch((err) => onLoadError(err, mySeq));
   }
 
@@ -429 +630 @@
     albumName = '';
     loadSeq++;  // cancel any in-flight load
-    dropPreload();  // free any prefetched next-track blob
+    dropPreload();
+    teardownChain();
     if (currentObjectUrl) { try { URL.revokeObjectURL(currentObjectUrl); } catch (e) {} }
     currentObjectUrl = null;
@@ -510 +712 @@
     wire('previoustrack', () => prev());
     wire('nexttrack', () => next());
-    wire('seekto', (e) => { if (e && e.seekTime != null && audio.duration) { try { audio.currentTime = e.seekTime; } catch (er) {} } });
+    wire('seekto', (e) => {
+      if (!e || e.seekTime == null) return;
+      // Lock-screen scrubber works in TRACK coordinates (positionState below).
+      if (useMse() && chain.length) {
+        const seg = currentSegment();
+        if (seg) { try { audio.currentTime = seg.start + Math.min(e.seekTime, seg.end - seg.start - 0.1); } catch (er) {} }
+        return;
+      }
+      if (audio.duration) { try { audio.currentTime = e.seekTime; } catch (er) {} }
+    });
+  }
+  // Lock-screen / notification scrubber: report per-track position, not the
+  // whole-chain timeline.
+  function updatePositionState() {
+    if (!('mediaSession' in navigator) || !navigator.mediaSession.setPositionState) return;
+    try {
+      const dt = displayTimes();
+      if (!isFinite(dt.dur) || !dt.dur) return;
+      navigator.mediaSession.setPositionState({
+        duration: dt.dur,
+        playbackRate: audio.playbackRate || 1,
+        position: Math.min(dt.cur, dt.dur),
+      });
+    } catch (e) { /* non-fatal */ }
   }
   // Reset the error counter only on a REAL playback start (`playing`), not the
@@ -516 +741 @@
   // there would prevent the 3-strikes stop from ever triggering on a broken
   // track → infinite "next" loop. `playing` only fires when audio is actually playing.
-  audio.addEventListener('playing', () => { consecutiveErrors = 0; preloadNext(); });
+  audio.addEventListener('playing', () => {
+    consecutiveErrors = 0;
+    if (useMse()) ensureNextAppended(); else preloadNext();
+    updatePositionState();
+  });
   audio.addEventListener('pause', () => { isPlaying = false; root.classList.remove('is-playing'); if ('mediaSession' in navigator) { try { navigator.mediaSession.playbackState = 'paused'; } catch (e) {} } });
   audio.addEventListener('ended', next);
@@ -522 +751 @@
     const code = audio.error ? audio.error.code : '?';
     console.error('[pcms-audio] playback error', code, audio.src, e);
+    if (useMse() && ms) {
+      // The MSE pipeline failed (decode/append) → permanently fall back to the
+      // blob engine for this session and retry the SAME track.
+      console.warn('[pcms-audio] MSE failed, falling back to blob playback');
+      mseFailed = true;
+      teardownChain();
+      if (queue[currentIndex]) loadTrack(currentIndex, true);
+      return;
+    }
     consecutiveErrors++;
     // On network/decode error: skip to next track instead of stalling.
@@ -533 +771 @@
   audio.addEventListener('volumechange', () => { root.classList.toggle('is-muted', audio.muted || audio.volume === 0); });
   audio.addEventListener('timeupdate', () => {
-    if (!audio.duration || isNaN(audio.duration)) return;
-    const pct = (audio.currentTime / audio.duration) * 100;
+    // Gapless boundary: in MSE mode a track change is just the timeline
+    // flowing past a segment edge — detect it here and update the chrome.
+    if (useMse() && chain.length) maybeCrossBoundary();
+    const dt = displayTimes();
+    if (!dt.dur || isNaN(dt.dur) || !isFinite(dt.dur)) return;
+    const pct = (dt.cur / dt.dur) * 100;
     seekFill.style.width = pct + '%';
     sheetSeekFill.style.width = pct + '%';
-    currentEl.textContent  = formatTime(audio.currentTime);
-    totalEl.textContent    = formatTime(audio.duration);
-    sheetCurrent.textContent = formatTime(audio.currentTime);
-    sheetTotal.textContent   = formatTime(audio.duration);
+    currentEl.textContent  = formatTime(dt.cur);
+    totalEl.textContent    = formatTime(dt.dur);
+    sheetCurrent.textContent = formatTime(dt.cur);
+    sheetTotal.textContent   = formatTime(dt.dur);
   });
 
@@ -551 +793 @@
   function attachSeek(seekEl) {
     seekEl.addEventListener('click', (e) => {
-      if (!audio.duration) return;
       const rect = seekEl.getBoundingClientRect();
       const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      if (useMse() && chain.length) {
+        // Seek within the CURRENT track's segment of the chain timeline.
+        const seg = currentSegment();
+        if (seg) {
+          try { audio.currentTime = seg.start + ratio * (seg.end - seg.start); } catch (er) {}
+          updatePositionState();
+        }
+        return;
+      }
+      if (!audio.duration) return;
       audio.currentTime = ratio * audio.duration;
     });
@@ -863 +1114 @@
       sessionStorage.setItem(PLAYER_STATE_KEY, JSON.stringify({
         queue, currentIndex, albumName,
-        time: audio.currentTime || 0,
+        // In-TRACK position (the MSE timeline spans the whole chain; a restore
+        // starts a fresh chain where this track begins at 0).
+        time: displayTimes().cur || 0,
         playing: !!audio.src && !audio.paused,
       }));

src/views/shell.ejs

@@ -400 +400 @@
      ?v=N — cache-buster: bump bij elke audio-player.js wijziging zodat
      Cloudflare (max-age=1y) niet de oude versie blijft serveren. -->
-<script src="/assets/js/audio-player.js?v=31"></script>
+<script src="/assets/js/audio-player.js?v=32"></script>
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
      player-API's + gedeelde mutual-exclusion registry met de site-speler. -->