add hardware control

static/app.js

@@ -56,7 +56,7 @@ function renderContent(data) {
       let symbol = '📄';
       if (file.file_type === 'music') {
         symbol = '🔊';
-        currentMusicFiles.push({ path: file.path, index: idx });
+        currentMusicFiles.push({ path: file.path, index: idx, title: file.name.replace('.mp3', '') });
       } else if (file.file_type === 'image') {
         symbol = '🖼️';
       }
@@ -235,9 +235,20 @@ document.querySelectorAll('.play-file').forEach(link => {
           audioPlayer.play();
           playerButton.innerHTML = pauseIcon;
           const pathParts = relUrl.split('/');
+          const folderName = pathParts[pathParts.length - 2];
           const fileName = pathParts.pop();
           const pathStr = pathParts.join('/');
           nowPlayingInfo.innerHTML = pathStr.replace(/\//g, ' > ') + '<br><span style="font-size: larger; font-weight: bold;">' + fileName.replace('.mp3', '') + '</span>';
+          // write into hardware player
+          if ('mediaSession' in navigator) {
+            navigator.mediaSession.metadata = new MediaMetadata({
+              title: currentMusicFiles[currentMusicIndex].title,
+              artist: folderName,
+              artwork: [
+                { src: '/static/icons/logo-512x512.png', sizes: '512x512', type: 'image/png' }
+              ]
+            });
+          };
           preload_audio();
         }
       } catch (error) {
@@ -308,7 +319,42 @@ window.addEventListener('popstate', function (event) {
 });
 
 
-// Add an event listener for the audio 'ended' event to auto-play the next music file.
+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();
+      }
+    }
+  });
+}
+
+// auto-play on audio 'ended' event logic
 document.getElementById('globalAudio').addEventListener('ended', () => {
   // Check if there's a next file in the array.
   if (currentMusicIndex >= 0 && currentMusicIndex < currentMusicFiles.length - 1) {

static/audioplayer.js

@@ -102,8 +102,8 @@ audio.ontimeupdate = function() {
   changeTimelinePosition();
   updateTimeInfo();
   if ('mediaSession' in navigator &&
-      typeof navigator.mediaSession.setPositionState === 'function' &&
+    'setPositionState' in navigator.mediaSession &&
-      !isNaN(audio.duration)) {
+    !isNaN(audio.duration)) {
     navigator.mediaSession.setPositionState({
       duration: audio.duration,
       playbackRate: audio.playbackRate,