Fix/audio play error

MyMusicClientSveltePwa/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mymusicclientsveltepwa",
   "private": true,
-  "version": "0.1.6",
+  "version": "0.1.61",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

MyMusicClientSveltePwa/src/lib/pages/Playlist.svelte

@@ -19,7 +19,6 @@
 
     intervalId = setInterval(() => {
       songs.set(getCachedPlaylistSongs(playlistId));
-      setPlaylists(playlistId);
     }, updateIntervalTimeOut);
   });
 

MyMusicClientSveltePwa/src/lib/scripts/mediasessionService.js

@@ -1,6 +1,8 @@
 import { getImageUrl } from "./api.js"
 import { nextSong, previousSong } from "./playbackService.js";
 
+const DEFAULT_PLAYBACK_RATE = 1.0;
+
 export function initializeMediaSessionService() {
   if ("mediaSession" in navigator) {
     navigator.mediaSession.setActionHandler("previoustrack", () => {
@@ -20,6 +22,16 @@ export function updateMediaSessionPlaybackState(isPlaying) {
   }
 }
 
+export function updatePositionState(currentTime, duration) {
+  if ("mediaSession" in navigator) {
+    navigator.mediaSession.setPositionState({
+      duration: duration,
+      playbackRate: DEFAULT_PLAYBACK_RATE,
+      position: currentTime,
+    });
+  }
+}
+
 export function updateMediaSessionMetadata(song, playlist) {
   if ("mediaSession" in navigator) {
     navigator.mediaSession.playbackState = "paused";

MyMusicClientSveltePwa/src/lib/scripts/playbackService.js

@@ -8,7 +8,7 @@ import { getCachedPlaylistSongs, getCachedPlaylists,
          getCurrentSongIndex, setCurrentSongIndex, setCurrentSongTime,
          getCurrentSongTime } from "./storageService";
 import { shuffleArray } from "./util";
-import { updateMediaSessionMetadata, updateMediaSessionPlaybackState } from "./mediasessionService";
+import { updateMediaSessionMetadata, updateMediaSessionPlaybackState, updatePositionState } from "./mediasessionService";
 
 export let currentSong = writable({id: -999, title: "", artist: "", album: "", source_id: ""});
 export let isPlaying = writable(false);
@@ -52,7 +52,6 @@ export function initializePlaybackService() {
     playOrPauseSong(playlistSongs[songIndex].id);
   }
 
-
   audioElement.addEventListener("play", () => {
     isPlaying.set(true);
     updateMediaSessionPlaybackState(true);
@@ -65,7 +64,7 @@ export function initializePlaybackService() {
     updateMediaSessionPlaybackState(false);
     if (get(isLoopingEnabled)) {
       audioElement.currentTime = 0;
-      audioElement.play();
+      audioElement.load();
     } else {
       nextSong();
     }
@@ -90,9 +89,17 @@ export function initializePlaybackService() {
     }
 
     setCurrentSongTime(audioElement.currentTime);
-
+    updatePositionState(audioElement.currentTime, audioElement.duration);
     playPercentage.set(percentage);
   });
+
+  audioElement.addEventListener("loadeddata", async (e) => {
+    // Safe to play audio now
+    await audioElement.play();
+  });
+  audioElement.addEventListener("error", (e) => {
+    console.error("Error loading audio:", e);
+  });
 }
 
 export function nextSong() {
@@ -121,11 +128,11 @@ export function playOrPauseSong(songId) {
     isPlaying.set(false); // set to false since this is a new song
     setCurrentSongIndex(songIndex);
   }
-
-  if (get(isPlaying)) {
+  else if (get(isPlaying)) {
     audioElement.pause();
-  } else {
-    audioElement.play(); // https://developer.chrome.com/blog/play-request-was-interrupted
+  }else {
+    // data is already loaded, just play
+    audioElement.play();
   }
 }
 
@@ -167,6 +174,9 @@ export function setPlaylists(playlistId) {
     // and update playlistSongs accordingly if shuffle is enabled
     return; // Already set to this playlist
   }
+  isLoopingEnabled.set(false);
+  isShuffledEnabled.set(false);
+  setPlaybackState(false, false);
   currentPlaylistId = playlistId;
   originalPlaylistSongs = getCachedPlaylistSongs(playlistId);
   playlistSongs = originalPlaylistSongs;