diff --git a/static/audioplayer.js b/static/audioplayer.js index 6171f9c..d62db3d 100644 --- a/static/audioplayer.js +++ b/static/audioplayer.js @@ -56,6 +56,8 @@ timeline.addEventListener('touchcancel', () => { isSeeking = false; }); audio.addEventListener('loadedmetadata', () => { timeline.min = 0; timeline.max = audio.duration; + timeline.value = 0; + timeline.style.backgroundSize = '0% 100%'; }); @@ -86,32 +88,20 @@ function formatTime(seconds) { // --- Update timeline, time info, and media session on each time update --- -let lastPosCall = 0; -audio.ontimeupdate = () => { - // — your slider + time display update — - if (!isSeeking) { +function updateTimeline() { + if (!isSeeking && audio.duration) { timeline.value = audio.currentTime; timeline.style.backgroundSize = `${(audio.currentTime / audio.duration) * 100}% 100%`; + timeInfo.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`; } - timeInfo.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`; +} - // — throttled Media Session update — - if ( - 'mediaSession' in navigator && - 'setPositionState' in navigator.mediaSession && - !isNaN(audio.duration) - ) { - const now = performance.now(); - if (now - lastPosCall > 1000) { - lastPosCall = now; - navigator.mediaSession.setPositionState({ - duration: audio.duration, - playbackRate: audio.playbackRate, - position: audio.currentTime - }); - } - } -}; +audio.ontimeupdate = updateTimeline; + +// Fallback for mobile throttling +setInterval(() => { + if (!audio.paused && !isSeeking) updateTimeline(); +}, 500); // --- When audio ends ---