Change playSong method to consume song object rather than queue ID

src/lib/components/custom/QueueFrame.svelte

@@ -19,7 +19,7 @@
 
 {#snippet playerQueue()}
     {#each queue as song, idx}
-        <p onclick={() => playSong(idx)}>{song.artist} - {song.title} ({timeFormat(song.duration)})<Button onclick={() => removeSongFromQueue(idx)}>X</Button></p>
+        <p onclick={() => playSong(song, idx)}>{song.artist} - {song.title} ({timeFormat(song.duration)})<Button onclick={() => removeSongFromQueue(idx)}>X</Button></p>
     {/each}
 
     <Button onclick={() => queue.push(queue[0])}>Add</Button>

src/routes/+page.svelte

@@ -54,11 +54,16 @@
         }
     }
 
-    function playSong(songIndex: number) {
-        console.log(queue[songIndex].title);
-        const chosenSong = queue[songIndex];
+    function playSong(song: unknown, songIndex: number) {
+        //const chosenSong = queue[songIndex];
+        pause();
+        newSong(song);
+        play();
+    }
+
+    function newSong(song: number) {
         let parameters = [
-            { parameter: "id", value: chosenSong.id },
+            { parameter: "id", value: song.id },
             //{ parameter: "maxBitRate", value: } // TODO
             //{ parameter: "format", value: } // TODO
             //{ parameter: "timeOffset", value: } // TODO? Only Video related
@@ -67,13 +72,6 @@
             //{ parameter: "converted", value: } // TODO? Only Video related
         ];
         let url = OpenSubsonic.getApiUrl("stream", parameters);
-
-        pause();
-        newSong(url);
-        play();
-    }
-
-    function newSong(url: string) {
         source = new Audio(url); // Assign new URL
 
         // Reassign Event Handlers
@@ -93,6 +91,8 @@
         source.ontimeupdate = () => {
             progress = source.currentTime;
         }
+
+        source.load();
     }
 
     function play() {