Update public/script.js

public/script.js

@@ -129,31 +129,38 @@ function updatePlayingIndicator() {
 }
 
 function playMusic(fileName) {
-    if (isLoadingMusic || fileName === currentPlaying) {
-        console.log("This song is already loading or playing.");
+    if (isLoadingMusic && fileName === currentPlaying) {
+        console.log("This song is already loading.");
+        return;
+    } else if (!isLoadingMusic && fileName === currentPlaying) {
+        console.log("This song is already playing.");
         return;
     }
 
-    isLoadingMusic = true;
-    currentPlaying = fileName;
+    isLoadingMusic = true; // Moved here to handle the loading state correctly for a new song.
+    currentPlaying = fileName; // Update the currentPlaying variable to the new song.
+
     updatePlayingIndicator();
 
-    const player = document.getElementById('audio-player');
+    // Previous song's loading process cleanup, if any
     const loaderContainer = document.getElementById('loader-container');
+    loaderContainer.innerHTML = ''; // Clears any existing loader elements
+
+    const player = document.getElementById('audio-player');
     const loaderElement = document.createElement('div');
     loaderElement.classList.add('loader');
     loaderContainer.appendChild(loaderElement);
 
-    player.style.display = 'none';
-    player.src = `/music/${fileName}`;
-    player.load();
+    player.style.display = 'none'; // Hide the player UI during loading
+    player.src = `/music/${fileName}`; // Set the new source file
+    player.load(); // Start loading the new source file
 
     player.oncanplaythrough = () => {
-        isLoadingMusic = false;
-        loaderContainer.remove();
-        player.style.display = '';
-        player.play();
-        player.loop = isLooping;
+        isLoadingMusic = false; // Update the loading flag when ready to play
+        loaderContainer.innerHTML = ''; // Remove the loader element
+        player.style.display = ''; // Show the player UI
+        player.play(); // Start playback
+        player.loop = isLooping; // Ensure looping state is applied
     };
 
     player.onended = () => {
@@ -161,15 +168,14 @@ function playMusic(fileName) {
             const currentIndex = trackList.indexOf(currentPlaying);
             if (currentIndex !== -1 && currentIndex < trackList.length - 1) {
                 playMusic(trackList[currentIndex + 1]);
-            } else {
             }
         }
     };
 
     player.onerror = () => {
-        isLoadingMusic = false;
-        loaderContainer.remove();
+        isLoadingMusic = false; // Ensure flag is reset on error
+        loaderContainer.innerHTML = ''; // Clear out the loader element
         alert(`Error loading the music: ${fileName}`);
-        currentPlaying = '';
+        currentPlaying = ''; // Reset the current playing track
     };
 }