Changeset 21522ae in Klonkt for src/assets/js/audio-player.js

Timestamp:

05/20/2026 10:14:01 PM (4 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

353c39c

Parents:

46f23fd

git-author:

Robin Genis <roboburr@…> (05/20/2026 10:13:26 PM)

git-committer:

Robin Genis <roboburr@…> (05/20/2026 10:14:01 PM)

Message:

audio: Spotify-style blob playback + same-origin gate (fix playback loop)

Root cause of the "next-loops-but-never-plays after 4-5 songs" bug: every
track URL was HMAC-signed once at page-render time with a 10-min TTL. A whole
queue shared that single deadline, so tracks further down expired mid-session
-> /audio/stream returned 403 -> audio 'error' -> auto-skip -> next track also
expired -> infinite loop. The 3-strike guard never fired because the eager
'play' event reset the counter before each 403 landed.

Removed the expiring-token system entirely and replaced it with two
non-expiring layers:

• Client fetch()es track bytes and plays from a blob: object URL (no shareable URL, no "save audio as"); blobs revoked to avoid leaks; loadSeq guards fast prev/next; pre-seed is metadata-only (no auto-download).
• Server gates /audio/stream to same-origin browser fetches (X-Audio-Player header or Sec-Fetch-Site): blocks address-bar paste, hotlinks, curl.

Also: reset error counter on real 'playing' event (not eager 'play') so the
3-strike auto-skip-stop actually works; fix admin play-state detection to
compare logical currentTrack().url instead of the now-blob: audio.src; bump
audio-player.js cache-buster v5.

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

File:

• src/assets/js/audio-player.js (modified) (10 diffs)

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.
+  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.
+  let loadSeq = 0;
 
   // Hide initially
@@ -177 +184 @@
   }
 
-  function loadTrack(index) {
+  // 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.
+  async function fetchAsObjectUrl(url) {
+    const r = await fetch(url, {
+      credentials: 'same-origin',
+      headers: { 'X-Audio-Player': '1' },
+    });
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    const blob = await r.blob();
+    return URL.createObjectURL(blob);
+  }
+
+  // metaOnly: show the track in the UI but DON'T download its bytes yet.
+  // Used by the site pre-seed so opening a page doesn't auto-download audio;
+  // the blob is fetched lazily on the first play().
+  function loadTrack(index, autoplay, metaOnly) {
     if (!queue[index]) {
       console.warn('[pcms-audio] loadTrack: no track at index', index);
@@ -188 +210 @@
       return;
     }
-    console.log('[pcms-audio] loading', t.title, t.url);
-    // Schone overgang: pause + reset voorkomt state-corruption van het
-    // audio-element na meerdere src-changes (bug die continuous playback
-    // brak na 3-4 tracks). audio.load() forceert reset van internal state.
-    try { audio.pause(); } catch (e) {}
-    audio.src = t.url;
-    try { audio.load(); } catch (e) {}
+    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.
     titleEl.textContent  = t.title  || 'Untitled';
     artistEl.textContent = t.artist || '';
@@ -205 +223 @@
     document.body.classList.add('has-audio-player');
     renderQueue();
+
+    if (metaOnly) return;
+
+    const mySeq = ++loadSeq;
+    root.classList.add('audio-loading');
+    fetchAsObjectUrl(t.url).then((objUrl) => {
+      if (mySeq !== loadSeq) { URL.revokeObjectURL(objUrl); return; }  // superseded
+      root.classList.remove('audio-loading');
+      // Free the previous track's blob — otherwise every track leaks a copy.
+      if (currentObjectUrl) { try { URL.revokeObjectURL(currentObjectUrl); } catch (e) {} }
+      currentObjectUrl = objUrl;
+      // Schone overgang: pause + load forceert reset van internal state na
+      // meerdere src-changes (voorkomt state-corruption van het audio-element).
+      try { audio.pause(); } catch (e) {}
+      audio.src = objUrl;
+      try { audio.load(); } catch (e) {}
+      if (autoplay) play();
+    }).catch((err) => {
+      if (mySeq !== loadSeq) return;  // superseded — ignore stale failure
+      root.classList.remove('audio-loading');
+      console.error('[pcms-audio] track fetch failed', err);
+      // Treat a failed download like a playback error: bump the counter and
+      // auto-skip, but stop after 3 in a row so we never loop forever.
+      consecutiveErrors++;
+      if (consecutiveErrors < 3 && queue.length > 1) setTimeout(next, 400);
+    });
   }
 
@@ -211 +255 @@
     albumName = (opts && opts.albumName) || '';
     if (!queue.length) return;
-    loadTrack(typeof startIdx === 'number' ? Math.max(0, Math.min(startIdx, queue.length - 1)) : 0);
-    play();
+    loadTrack(typeof startIdx === 'number' ? Math.max(0, Math.min(startIdx, queue.length - 1)) : 0, true);
   }
 
   function play() {
-    if (!audio.src) return;
+    if (!audio.src) {
+      // Nothing fetched yet (pre-seed showed metadata only, or a load is still
+      // in flight). Kick off the blob load for the current track and autoplay.
+      if (queue[currentIndex]) loadTrack(currentIndex, true);
+      return;
+    }
     const p = audio.play();
     if (p && typeof p.catch === 'function') {
@@ -236 +284 @@
   function next() {
     if (!queue.length) return;
-    loadTrack((currentIndex + 1) % queue.length);
-    play();
+    loadTrack((currentIndex + 1) % queue.length, true);
   }
   function prev() {
     if (!queue.length) return;
-    loadTrack(currentIndex === 0 ? queue.length - 1 : currentIndex - 1);
-    play();
+    loadTrack(currentIndex === 0 ? queue.length - 1 : currentIndex - 1, true);
   }
   function close() {
@@ -251 +297 @@
     queue = [];
     albumName = '';
+    loadSeq++;  // cancel any in-flight load
+    if (currentObjectUrl) { try { URL.revokeObjectURL(currentObjectUrl); } catch (e) {} }
+    currentObjectUrl = null;
+    try { audio.removeAttribute('src'); audio.load(); } catch (e) {}
   }
 
@@ -268 +318 @@
         const idx = parseInt(li.dataset.idx, 10);
         if (!isNaN(idx) && idx !== currentIndex) {
-          loadTrack(idx);
-          play();
+          loadTrack(idx, true);
         }
       });
@@ -288 +337 @@
   audio.addEventListener('play',  () => {
     isPlaying = true;
-    consecutiveErrors = 0;  // reset bij succesvolle play
     root.classList.add('is-playing');
     root.classList.remove('audio-needs-tap');  // verstop tap-hint
   });
+  // Reset de error-teller pas bij ECHTE playback-start (`playing`), niet bij
+  // het eager `play`-event. `play` vuurt vóór een eventuele netwerk-/decode-
+  // fout, dus resetten daar zou de 3-strikes-stop nooit laten triggeren bij
+  // een kapotte track → infinite "next"-loop. `playing` vuurt alleen als er
+  // daadwerkelijk audio speelt.
+  audio.addEventListener('playing', () => { consecutiveErrors = 0; });
   audio.addEventListener('pause', () => { isPlaying = false; root.classList.remove('is-playing'); });
   audio.addEventListener('ended', next);
@@ -539 +593 @@
       cover:  t.cover_url || t.cover || '',
     }));
-    if (queue.length) loadTrack(0);
+    if (queue.length) loadTrack(0, false, true);  // metadata only — fetch on first play
   }
 })();