Update public/script.js

public/script.js

@@ -215,20 +215,24 @@ function playMusic(fileName) {
     }
 
     isLoadingMusic = true;
-    showLoader(true); // Show loader when starting to load a new song
     currentPlaying = fileName;
 
     updatePlayingIndicator();
 
-    document.getElementById('audio-player').style.display = 'flex'; // Show custom player UI
+    const loaderContainer = document.getElementById('loader-container');
+    loaderContainer.innerHTML = '';
+    const loaderElement = document.createElement('div');
+    loaderElement.classList.add('loader');
+    loaderContainer.appendChild(loaderElement);
 
     // Set the new source file for audio
     audio.src = `/music/${fileName}`;
     audio.load(); // Start loading the new source file
 
     audio.oncanplaythrough = () => {
+        document.getElementById('audio-player').style.display = 'flex'; // Show custom player UI
+        loaderContainer.innerHTML = '';
         isLoadingMusic = false;
-        showLoader(false); // Hide loader when song is ready
         document.getElementById('play-pause-btn').textContent = 'Pause'; // Update play/pause button
         audio.play(); // Start playback
     };
@@ -236,26 +240,20 @@ function playMusic(fileName) {
     // Updated onended event handler within playMusic function
     audio.onended = () => {
       if (isLooping) {
-        // Replay the current song
-        audio.currentTime = 0;
-        audio.play();
+          // Replay the current song
+          audio.currentTime = 0;
+          audio.play();
       } else {
           const currentIndex = trackList.indexOf(currentPlaying);
           if (currentIndex !== -1 && currentIndex < trackList.length - 1) {
-            playMusic(trackList[currentIndex + 1]);
+              playMusic(trackList[currentIndex + 1]);
           }
       }
-    };
+  };
 
     audio.onerror = () => {
         isLoadingMusic = false;
-        showLoader(false); // Hide loader on error
         alert(`Error loading the music: ${fileName}`);
         currentPlaying = ''; // Reset the current playing track
     };
-}
-
-function showLoader(isVisible) {
-    const loader = document.getElementById('loader');
-    loader.style.display = isVisible ? 'block' : 'none'; // Toggle visibility based on `isVisible`
 }