diff --git a/web/src/component/AudioPlayer.js b/web/src/component/AudioPlayer.js
index 7d5881b..23894ce 100644
--- a/web/src/component/AudioPlayer.js
+++ b/web/src/component/AudioPlayer.js
@@ -22,7 +22,20 @@ function AudioPlayer(props) {
   const [timerCount, setTimerCount] = useState(0);
   const [timerID, setTimerID] = useState(null);
 
+  // init mediaSession API
   useEffect(() => {
+    navigator.mediaSession.setActionHandler("stop", () => {
+      props.setPlayingFile({});
+    });
+  }, []);
+
+  useEffect(() => {
+    // media session related staff
+    navigator.mediaSession.metadata = new window.MediaMetadata({
+      title: props.playingFile.filename,
+      album: props.playingFile.foldername,
+      artwork: [{ src: "/favicon.png", type: "image/png" }],
+    });
     // no playing file
     if (props.playingFile.id === undefined) {
       setPlayingURL("");
@@ -62,7 +75,7 @@ function AudioPlayer(props) {
         );
       }
     }
-  }, [props.playingFile.id, raw, prepare, selectedFfmpegConfig]);
+  }, [props.playingFile, raw, prepare, selectedFfmpegConfig]);
 
   let navigate = useNavigate();