Changeset 8681239 in Klonkt

Timestamp:

05/07/2026 10:38:43 PM (4 months ago)

Author:

Robin <robin@…>

Branches:

main

Children:

76e9cfd

Parents:

00550c0

Message:

audio v3: robust continuous playback — pause+load reset, error auto-skip, autoplay policy hint

• loadTrack: pause + audio.load() for a clean reset (prevents state corruption after multiple src changes, root cause of 'stop after 3-4 tracks')
• play() rejection NotAllowedError -> visual pulse hint on the play button so the user knows 'tap to continue' (iOS autoplay policy)
• audio.error event: auto-skip to next track, max 3 errors in a row before giving up (anti-infinite-loop)
• Reset error counter on successful play
• Cache buster ?v=3 on shell.ejs

Files:

• .beads/issues.jsonl (modified) (1 diff)
• src/assets/css/audio.css (modified) (1 diff)
• src/assets/js/audio-player.js (modified) (4 diffs)
• src/views/shell.ejs (modified) (1 diff)

.beads/issues.jsonl

@@ +1 @@
+{"_type":"issue","id":"prutfolio-src-3fl","title":"Audio: continuous playback breekt na 3-4 tracks (browser-policy / state corruption)","description":"Na fix v1 (next() unconditional play) werkt 1-\u003e2 en 2-\u003e3, maar stopt bij 3-\u003e4. Verdacht: iOS Safari autoplay-policy revoke OF audio element state-corruption na meerdere src changes. Fix: pause()+load()+play() pattern in loadTrack, error-event auto-skip naar volgende, NotAllowedError visuele hint (pulse op play-btn).","status":"open","priority":1,"issue_type":"bug","owner":"robin@roboburr.com","created_at":"2026-05-07T22:38:42Z","created_by":"Robin","updated_at":"2026-05-07T22:38:42Z","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"prutfolio-src-0tg","title":"Audio: continuous playback fix — next() altijd play() ipv conditional","description":"Bug: next() checkte 'if (isPlaying) play()' maar isPlaying was al false door de pause-event die de browser firet vóór ended. Resultaat: track stopt na 1 keer. Fix: drop de conditional, roep altijd play() aan. Zelfde voor prev(). Bestand: src/assets/js/audio-player.js regels 221-230.","status":"closed","priority":1,"issue_type":"bug","assignee":"Robin","owner":"robin@roboburr.com","created_at":"2026-05-06T22:18:40Z","created_by":"Robin","updated_at":"2026-05-06T22:28:20Z","started_at":"2026-05-06T22:26:37Z","closed_at":"2026-05-06T22:28:20Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"prutfolio-src-e44","title":"Asset cache-busting via commit-hash ipv handmatig bumpen","description":"Nu staan ?v=N hardcoded in shell.ejs. Beter: middleware zet res.locals.assetVersion = git-commit-sha (build-time of runtime) zodat elke deploy auto-cache-bust krijgt. Behandel alle static script/css tags in shell.ejs (htmx.min.js, audio-player.js, install-app.js).","status":"open","priority":3,"issue_type":"task","owner":"robin@roboburr.com","created_at":"2026-05-07T20:03:17Z","created_by":"Robin","updated_at":"2026-05-07T20:03:17Z","dependency_count":0,"dependent_count":0,"comment_count":0}

src/assets/css/audio.css

@@ -111 +111 @@
   opacity: 0;
   pointer-events: none;
+}
+
+/* Browser-autoplay-policy heeft de auto-advance gestopt — typisch
+   na 3-4 tracks op iOS Safari. Visuele hint dat user op play moet
+   tappen om door te gaan (PCMS v10.1, audio-player.js). */
+.audio-player.audio-needs-tap .audio-btn-play {
+  animation: audio-pulse-tap 1.2s ease-in-out infinite;
+  background: rgba(255, 165, 0, 0.18);
+  border-color: orange;
+  color: orange;
+}
+@keyframes audio-pulse-tap {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.5); }
+  50%      { box-shadow: 0 0 0 8px rgba(255, 165, 0, 0); }
 }
 .audio-player-inner {

src/assets/js/audio-player.js

@@ -189 +189 @@
     }
     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) {}
     titleEl.textContent  = t.title  || 'Untitled';
     artistEl.textContent = t.artist || '';
@@ -214 +219 @@
     const p = audio.play();
     if (p && typeof p.catch === 'function') {
-      p.catch((err) => console.warn('[pcms-audio] play() rejected', err));
+      p.catch((err) => {
+        console.warn('[pcms-audio] play() rejected:', err.name, err.message);
+        // Browser-autoplay-policy heeft 't gestopt (typisch na 3-4
+        // automatische plays op iOS Safari, of als tab tijdelijk inactive
+        // was). Visuele hint dat user op play moet tappen.
+        if (err && err.name === 'NotAllowedError') {
+          root.classList.add('audio-needs-tap');
+          isPlaying = false;
+          root.classList.remove('is-playing');
+        }
+      });
     }
   }
@@ -268 +283 @@
   // 5. Audio element events → UI sync
   // ============================================================
-  audio.addEventListener('play',  () => { isPlaying = true;  root.classList.add('is-playing'); });
+  // Error-counter voorkomt infinite-loop als ALLE tracks broken zijn.
+  let consecutiveErrors = 0;
+
+  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
+  });
   audio.addEventListener('pause', () => { isPlaying = false; root.classList.remove('is-playing'); });
   audio.addEventListener('ended', next);
@@ -274 +297 @@
     const code = audio.error ? audio.error.code : '?';
     console.error('[pcms-audio] playback error', code, audio.src, e);
+    consecutiveErrors++;
+    // Bij netwerk/decode-fout: skip naar volgende track ipv stilstaan.
+    // Max 3 fouten op rij voordat we opgeven (anders infinite loop).
+    if (consecutiveErrors < 3 && queue.length > 1) {
+      console.warn('[pcms-audio] auto-skip naar volgende na error', consecutiveErrors);
+      setTimeout(next, 400);
+    }
   });
-  audio.addEventListener('stalled', () => console.warn('[pcms-audio] stalled'));
+  audio.addEventListener('stalled', () => console.warn('[pcms-audio] stalled at', audio.currentTime));
   audio.addEventListener('volumechange', () => { root.classList.toggle('is-muted', audio.muted || audio.volume === 0); });
   audio.addEventListener('timeupdate', () => {

src/views/shell.ejs

@@ -277 +277 @@
      ?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=2"></script>
+<script src="/assets/js/audio-player.js?v=3"></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>