From 6d16b2c0a3119781426decf6a98ba2148eae02d0 Mon Sep 17 00:00:00 2001
From: Jonathan Schuster <webmaster@jonathan859.com>
Date: Wed, 29 Apr 2026 20:25:05 +0200
Subject: [PATCH] fix: resolve FLAC audio player showing 00:00 duration

With preload=none the browser never fetches metadata, so Chrome
cannot populate the duration field for FLAC files. On player open:
set preload=metadata and call audio.load() to trigger a metadata-only
fetch. Also render a server-computed duration label beneath the audio
element as a fallback for formats the browser cannot parse.
---
 web.py | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web.py b/web.py
index 4a3e879..55c83fb 100644
--- a/web.py
+++ b/web.py
@@ -626,14 +626,15 @@ function togglePlayer(idx, filename) {
 
   if (!open) {
     if (!audio.getAttribute('data-src-set')) {
+      audio.preload = 'metadata';
       audio.src = '/stream/' + encodeURIComponent(filename);
+      audio.load();
       audio.setAttribute('data-src-set','1');
     }
     prow.hidden = false;
     btn.setAttribute('aria-expanded','true');
     btn.textContent = '⏹ Hide';
     btn.setAttribute('aria-label','Hide player for '+filename);
-    // Move focus to audio control so keyboard users can operate it immediately
     audio.focus();
   } else {
     audio.pause();
@@ -828,9 +829,12 @@ async function load() {
     prow.className = 'player-row';
     prow.id = 'prow-'+i;
     prow.hidden = true;
+    const durLabel = f.duration != null
+      ? `<div class="muted" style="font-size:11px;margin-top:3px">Duration: ${fmtDur(f.duration)}</div>`
+      : '';
     prow.innerHTML = `<td colspan="6">
       <audio id="aud-${i}" controls preload="none"
-        aria-label="Playback: ${esc(f.name)}"></audio>
+        aria-label="Playback: ${esc(f.name)}"></audio>${durLabel}
     </td>`;
     tbody.appendChild(prow);