cleanup audio player

static/app.js

@@ -456,42 +456,6 @@ function reloadDirectory() {
 }
 
 
-
-if ('mediaSession' in navigator) {
-
-  // Handler for the play action
-  navigator.mediaSession.setActionHandler('play', () => {
-    document.getElementById('globalAudio').play();
-  });
-
-  // Handler for the pause action
-  navigator.mediaSession.setActionHandler('pause', () => {
-    document.getElementById('globalAudio').pause();
-  });
-
-  // Handler for the previous track action
-  navigator.mediaSession.setActionHandler('previoustrack', () => {
-    if (currentMusicIndex > 0) {
-      const prevFile = currentMusicFiles[currentMusicIndex - 1];
-      const prevLink = document.querySelector(`.play-file[data-url="${prevFile.path}"]`);
-      if (prevLink) {
-        prevLink.click();
-      }
-    }
-  });
-
-  // Handler for the next track action
-  navigator.mediaSession.setActionHandler('nexttrack', () => {
-    if (currentMusicIndex >= 0 && currentMusicIndex < currentMusicFiles.length - 1) {
-      const nextFile = currentMusicFiles[currentMusicIndex + 1];
-      const nextLink = document.querySelector(`.play-file[data-url="${nextFile.path}"]`);
-      if (nextLink) {
-        nextLink.click();
-      }
-    }
-  });
-}
-
 document.getElementById('globalAudio').addEventListener('ended', () => {
   
   reloadDirectory().then(() => {

static/audioplayer.js

@@ -3,11 +3,10 @@ const cssVar = getComputedStyle(document.documentElement).getPropertyValue('--da
 
 // player DOM elements
 const nowPlayingInfo = document.getElementById('nowPlayingInfo');
-const audioPlayer = document.getElementById('globalAudio');
+const audio = document.getElementById('globalAudio');
 const audioPlayerContainer = document.getElementById('audioPlayerContainer');
 
 const playerButton = document.querySelector('.player-button'),
-      audio = document.querySelector('audio'),
       timeline = document.querySelector('.timeline'),
       timeInfo = document.getElementById('timeInfo'),
       playIcon = `
@@ -61,6 +60,18 @@ audio.addEventListener('loadedmetadata', () => {
 
 
 
+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;
@@ -75,29 +86,31 @@ function formatTime(seconds) {
 
 
 // --- Update timeline, time info, and media session on each time update ---
-audio.ontimeupdate = function() {
+let lastPosCall = 0;
-  
+audio.ontimeupdate = () => {
-  // --- Update the slider thumb position (in seconds) while playing ---
+  // — your slider + time display update —
   if (!isSeeking) {
     timeline.value = audio.currentTime;
-    const percentagePosition = (audio.currentTime / audio.duration) * 100;
+    timeline.style.backgroundSize = `${(audio.currentTime / audio.duration) * 100}% 100%`;
-    timeline.style.backgroundSize = `${percentagePosition}% 100%`;
   }
+  timeInfo.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
 
-  // --- Update the time display ---
+  // — throttled Media Session update —
-  const currentTimeFormatted = formatTime(audio.currentTime);
+  if (
-  const durationFormatted = isNaN(audio.duration) ? "00:00" : formatTime(audio.duration);
+    'mediaSession' in navigator &&
-  timeInfo.innerHTML = `${currentTimeFormatted} / ${durationFormatted}`;
-
-  if ('mediaSession' in navigator &&
     'setPositionState' in navigator.mediaSession &&
-    !isNaN(audio.duration)) {
+    !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
       });
     }
+  }
 };
 
 
@@ -107,7 +120,6 @@ audio.onended = function() {
 };
 
 async function downloadAudio() {
-  const audio = document.getElementById('globalAudio');
   const src   = audio.currentSrc || audio.src;
   if (!src) return;
 
@@ -132,8 +144,8 @@ let currentFetchController = null;
 
 async function startPlaying(relUrl) {
       // Pause the audio and clear its source.
-      audioPlayer.pause();
+      audio.pause();
-      audioPlayer.src = '';
+      audio.src = '';
 
       // Display the audio player container.
       audioPlayerContainer.style.display = "block";
@@ -171,9 +183,9 @@ async function startPlaying(relUrl) {
         }
         
         // Set the media URL, load, and play the audio.
-        audioPlayer.src = mediaUrl;
+        audio.src = mediaUrl;
-        audioPlayer.load();
+        audio.load();
-        await audioPlayer.play();
+        await audio.play();
         clearTimeout(spinnerTimer);
         hideSpinner();
         currentTrackPath = relUrl;
@@ -194,6 +206,12 @@ async function startPlaying(relUrl) {
               { src: '/icons/logo-192x192.png', sizes: '192x192', type: 'image/png' }
             ]
             });
+            navigator.mediaSession.playbackState = 'playing';
+            navigator.mediaSession.setPositionState({
+              duration:     audio.duration,
+              playbackRate: audio.playbackRate,
+              position:     0
+            });
         }
         
         nowPlayingInfo.innerHTML = pathStr.replace(/\//g, ' > ') +
@@ -208,3 +226,57 @@ async function startPlaying(relUrl) {
         }
       };
 }
+
+
+if ('mediaSession' in navigator) {
+
+  // Handler for the play action
+  navigator.mediaSession.setActionHandler('play', () => {
+    navigator.mediaSession.playbackState = 'playing'
+    document.getElementById('globalAudio').play();
+  });
+
+  // Handler for the pause action
+  navigator.mediaSession.setActionHandler('pause', () => {
+    navigator.mediaSession.playbackState = 'paused'
+    document.getElementById('globalAudio').pause();
+  });
+
+  // Handler for the previous track action
+  navigator.mediaSession.setActionHandler('previoustrack', () => {
+    if (currentMusicIndex > 0) {
+      const prevFile = currentMusicFiles[currentMusicIndex - 1];
+      const prevLink = document.querySelector(`.play-file[data-url="${prevFile.path}"]`);
+      if (prevLink) {
+        prevLink.click();
+      }
+    }
+  });
+
+  // Handler for the next track action
+  navigator.mediaSession.setActionHandler('nexttrack', () => {
+    if (currentMusicIndex >= 0 && currentMusicIndex < currentMusicFiles.length - 1) {
+      const nextFile = currentMusicFiles[currentMusicIndex + 1];
+      const nextLink = document.querySelector(`.play-file[data-url="${nextFile.path}"]`);
+      if (nextLink) {
+        nextLink.click();
+      }
+    }
+  });
+
+  // Handler for the seek backward action
+  navigator.mediaSession.setActionHandler('seekto', ({seekTime, fastSeek}) => {
+    if (fastSeek && 'fastSeek' in audio) {
+      audio.fastSeek(seekTime);
+    } else {
+      audio.currentTime = seekTime;
+    }
+    // immediately update the remote clock
+    navigator.mediaSession.setPositionState({
+      duration:     audio.duration,
+      playbackRate: audio.playbackRate,
+      position:     audio.currentTime
+    });
+  });
+
+}