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 (!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);