lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update time slider

Browse Source
This commit is contained in:
lelo 2025-05-29 20:24:19 +00:00
parent 11e6ffa9f0
commit 880fe9e97c
1 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
static/audioplayer.js
View File

@ -52,31 +52,18 @@ timeline.addEventListener('touchend', () => { isSeeking = false;
}); });
timeline.addEventListener('touchcancel', () => { isSeeking = false; }); timeline.addEventListener('touchcancel', () => { isSeeking = false; });
// --- When metadata is loaded, set slider range in seconds ---
audio.addEventListener('loadedmetadata', () => {
timeline.min = 0;
timeline.max = audio.duration;
timeline.value = 0;
timeline.style.backgroundSize = '0% 100%';
});
audio.addEventListener('play', () => {
if ('mediaSession' in navigator)
navigator.mediaSession.playbackState = 'playing';
});
audio.addEventListener('pause', () => {
if ('mediaSession' in navigator)
navigator.mediaSession.playbackState = 'paused';
});
// --- Seek function: directly set audio.currentTime using slider's value (in seconds) --- // --- Seek function: directly set audio.currentTime using slider's value (in seconds) ---
function changeSeek() { function changeSeek() {
audio.currentTime = timeline.value; audio.currentTime = timeline.value;
if ('mediaSession' in navigator && 'setPositionState' in navigator.mediaSession) {
navigator.mediaSession.setPositionState({
duration: audio.duration,
playbackRate: audio.playbackRate,
position: audio.currentTime
});
}
} }
// --- Utility: Format seconds as mm:ss --- // --- Utility: Format seconds as mm:ss ---
@ -96,6 +83,37 @@ function updateTimeline() {
} }
} }
// --- When metadata is loaded, set slider range in seconds ---
audio.addEventListener('loadedmetadata', () => {
timeline.min = 0;
timeline.max = audio.duration;
timeline.value = 0;
timeline.style.backgroundSize = '0% 100%';
});
// --- Update timeline and time info on time update ---
audio.addEventListener('timeupdate', () => {
updateTimeline();
if ('mediaSession' in navigator && 'setPositionState' in navigator.mediaSession) {
navigator.mediaSession.setPositionState({
duration: audio.duration,
playbackRate: audio.playbackRate,
position: audio.currentTime
});
}
});
// --- Update media session metadata when audio is loaded ---
audio.addEventListener('play', () => {
if ('mediaSession' in navigator)
navigator.mediaSession.playbackState = 'playing';
});
audio.addEventListener('pause', () => {
if ('mediaSession' in navigator)
navigator.mediaSession.playbackState = 'paused';
});
audio.ontimeupdate = updateTimeline; audio.ontimeupdate = updateTimeline;
// Fallback for mobile throttling // Fallback for mobile throttling
@ -254,6 +272,16 @@ if ('mediaSession' in navigator) {
} }
}); });
// Handler for the seek backward and seek forward actions
navigator.mediaSession.setActionHandler('seekbackward', details => {
const offset = details.seekOffset || 10;
audio.currentTime = Math.max(0, audio.currentTime - offset);
});
navigator.mediaSession.setActionHandler('seekforward', details => {
const offset = details.seekOffset || 10;
audio.currentTime = Math.min(audio.duration, audio.currentTime + offset);
});
// Handler for the seek backward action // Handler for the seek backward action
navigator.mediaSession.setActionHandler('seekto', ({seekTime, fastSeek}) => { navigator.mediaSession.setActionHandler('seekto', ({seekTime, fastSeek}) => {
if (fastSeek && 'fastSeek' in audio) { if (fastSeek && 'fastSeek' in audio) {