update time slider

static/audioplayer.js

@@ -52,31 +52,18 @@ timeline.addEventListener('touchend', () => { 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) ---
 function changeSeek() {
   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 ---
@@ -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;
 
 // 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
   navigator.mediaSession.setActionHandler('seekto', ({seekTime, fastSeek}) => {
     if (fastSeek && 'fastSeek' in audio) {

static/sw.js

@@ -1,4 +1,4 @@
-const cacheName = 'gottesdienste-v1.10';
+const cacheName = 'gottesdienste-v1.11';
 const assets = [
   '/',
   '/static/app.css',