Changeset 8681239 in Klonkt for src/assets/css/audio.css

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

File:

• src/assets/css/audio.css (modified) (1 diff)

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 {