polish(web): warm next track via fetch to shrink media-tile gap

Removing the second <audio> element fixed most of the OS media-tile flicker,
but skips now load the next track fresh → a brief gap where Windows shows the
generic site entry. Prefetch the next track's first ~4MB with fetch() (not a
media element, so no Chromium session flip) to warm the HTTP cache + TLS
connection; the src-swap then starts faster and the gap shrinks. Abortable on
queue change.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/player/player.js

@@ -276,10 +276,13 @@ function _setAudioSession() {
   try { if(navigator.audioSession) navigator.audioSession.type = 'playback'; } catch {}
 }
 
-// ─── PRELOAD — shadow Audio element actually buffers the next track ──────────
+// ─── PRELOAD — warm the next track via fetch (NO second <audio> element) ─────
+// A second media element makes Chromium flip the OS media session on skip (tile flicker).
+// So we prefetch the next track's first chunk with fetch() to warm the HTTP cache + TLS
+// connection — the main element's src-swap then starts faster → smaller gap → less tile flash.
 let _preUrl   = '';
 let _preId    = '';
-let _preAudio = null;
+let _preAbort = null;
 
 function _nextIdx() {
   if(S.repeat === 'one') return S.qIdx;
@@ -293,11 +296,17 @@ function _preloadNext() {
   const ni = _nextIdx();
   if(ni < 0) return;
   const next = S.queue[ni];
-  if(!next) return;
-  // (b) EXPERIMENT — no separate preload <audio> element. Navidrome's player keeps a single
-  // element only; a second buffering media element appears to make Chromium flip the OS media
-  // session on skip (Windows tile flicker). We rely on the main element's preload="auto" + the
-  // browser HTTP cache instead, and just warm the next cover art. Easy to revert if it doesn't help.
+  if(!next || _preId === next.id) return;
+  _preId  = next.id;
+  _preUrl = streamUrl(next.id);
+  // Warm the cache/connection with the first few MB (enough to start playback instantly).
+  try {
+    _preAbort?.abort();
+    _preAbort = new AbortController();
+    fetch(_preUrl, { signal: _preAbort.signal, headers: { Range: 'bytes=0-4194303' } })
+      .then(r => r.arrayBuffer())   // drain so the bytes land in the HTTP cache
+      .catch(() => {});
+  } catch {}
   if(next.coverArt) {
     [256, 512, 1024].forEach(size => {
       const img = new Image();
@@ -308,7 +317,8 @@ function _preloadNext() {
 
 function _clearPreload() {
   _preId = ''; _preUrl = '';
-  if(_preAudio) { _preAudio.src = ''; _preAudio = null; }
+  try { _preAbort?.abort(); } catch {}
+  _preAbort = null;
 }
 
 // ─── PLAY HISTORY (for prev-in-shuffle) ──────────────────────────────────────