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