Changeset 6a51968 in Klonkt

Timestamp:

06/25/2026 02:02:59 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

7a235bc

Parents:

c648b04

Message:

audio: Media Session API for reliable mobile auto-advance + lock-screen controls

On mobile, auto-advancing to the next track started then stopped immediately: iOS
pauses a programmatic play() with no active media session. Wire navigator.mediaSession
— per-track metadata (title/artist/album/artwork), play/pause/next/prev/seek action
handlers, and playbackState — so the session stays live (continuous playback works) and
the OS shows lock-screen / notification / headset controls. audio-player.js?v=30.

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

Location:

src

Files:

• assets/js/audio-player.js (modified) (4 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/js/audio-player.js

@@ -289 +289 @@
   });
 
+  // Media Session metadata (lock-screen / notification info + artwork). Set per
+  // track; the action handlers are wired once below. Keeping a live media session
+  // is what lets iOS continue a programmatic auto-advance play() instead of
+  // pausing it immediately.
+  function updateMediaMetadata(t) {
+    if (!('mediaSession' in navigator) || typeof MediaMetadata === 'undefined') return;
+    try {
+      const art = [];
+      if (t && t.cover) {
+        let u = t.cover; try { u = new URL(t.cover, location.href).href; } catch (e) {}
+        art.push({ src: u, sizes: '512x512', type: '' });
+      }
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: (t && t.title) || 'Untitled',
+        artist: (t && t.artist) || '',
+        album: albumName || '',
+        artwork: art,
+      });
+    } catch (e) { /* non-fatal */ }
+  }
+
   function loadTrack(index, autoplay, metaOnly) {
     if (!queue[index]) {
@@ -314 +335 @@
     renderQueue();
     markPlaying(t.id);
+    updateMediaMetadata(t);
 
     if (metaOnly) return;
@@ -475 +497 @@
     root.classList.remove('audio-needs-tap');  // hide tap hint
     mediaRegistry().setActive(registrySelf);   // pause any currently playing embeds
-  });
+    if ('mediaSession' in navigator) { try { navigator.mediaSession.playbackState = 'playing'; } catch (e) {} }
+  });
+
+  // Media Session action handlers (wired once): lock-screen / headset / car
+  // controls, and — crucially — an active session so iOS keeps a programmatic
+  // auto-advance playing instead of pausing it the instant it starts.
+  if ('mediaSession' in navigator) {
+    const ms = navigator.mediaSession;
+    const wire = (action, fn) => { try { ms.setActionHandler(action, fn); } catch (e) { /* unsupported action */ } };
+    wire('play', () => play());
+    wire('pause', () => pause());
+    wire('previoustrack', () => prev());
+    wire('nexttrack', () => next());
+    wire('seekto', (e) => { if (e && e.seekTime != null && audio.duration) { try { audio.currentTime = e.seekTime; } catch (er) {} } });
+  }
   // Reset the error counter only on a REAL playback start (`playing`), not the
   // eager `play` event. `play` fires before any network/decode error, so resetting
@@ -481 +517 @@
   // track → infinite "next" loop. `playing` only fires when audio is actually playing.
   audio.addEventListener('playing', () => { consecutiveErrors = 0; preloadNext(); });
-  audio.addEventListener('pause', () => { isPlaying = false; root.classList.remove('is-playing'); });
+  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);
   audio.addEventListener('error', (e) => {

src/views/shell.ejs

@@ -335 +335 @@
      ?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=29"></script>
+<script src="/assets/js/audio-player.js?v=30"></script>
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
      player-API's + gedeelde mutual-exclusion registry met de site-speler. -->