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.
This commit is contained in:
2026-04-29 20:25:05 +02:00
parent 7db0e0870f
commit 6d16b2c0a3
+6 -2
View File
@@ -626,14 +626,15 @@ function togglePlayer(idx, filename) {
if (!open) { if (!open) {
if (!audio.getAttribute('data-src-set')) { if (!audio.getAttribute('data-src-set')) {
audio.preload = 'metadata';
audio.src = '/stream/' + encodeURIComponent(filename); audio.src = '/stream/' + encodeURIComponent(filename);
audio.load();
audio.setAttribute('data-src-set','1'); audio.setAttribute('data-src-set','1');
} }
prow.hidden = false; prow.hidden = false;
btn.setAttribute('aria-expanded','true'); btn.setAttribute('aria-expanded','true');
btn.textContent = '⏹ Hide'; btn.textContent = '⏹ Hide';
btn.setAttribute('aria-label','Hide player for '+filename); btn.setAttribute('aria-label','Hide player for '+filename);
// Move focus to audio control so keyboard users can operate it immediately
audio.focus(); audio.focus();
} else { } else {
audio.pause(); audio.pause();
@@ -828,9 +829,12 @@ async function load() {
prow.className = 'player-row'; prow.className = 'player-row';
prow.id = 'prow-'+i; prow.id = 'prow-'+i;
prow.hidden = true; 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"> prow.innerHTML = `<td colspan="6">
<audio id="aud-${i}" controls preload="none" <audio id="aud-${i}" controls preload="none"
aria-label="Playback: ${esc(f.name)}"></audio> aria-label="Playback: ${esc(f.name)}"></audio>${durLabel}
</td>`; </td>`;
tbody.appendChild(prow); tbody.appendChild(prow);