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:
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user