Update public/script.js

public/script.js

@@ -4,6 +4,7 @@ let currentPlaying = ''; // Store the filename of the currently playing music
 let trackList = []; // Store currently displayed track filenames
 let currentPage = 1;
 let totalPages = 0;
+let audio = new Audio();
 
 window.onload = () => {
     // Attach click handlers for paging
@@ -17,6 +18,7 @@ window.onload = () => {
     });
     document.getElementById('audio-player').style.display = 'none';
     updatePageIndicator();
+    setupCustomAudioPlayer();
 };
 
 function changePage(direction) {
@@ -148,6 +150,45 @@ function updatePlayingIndicator() {
     });
 }
 
+function setupCustomAudioPlayer() {
+    // Play/Pause toggle
+    document.getElementById('play-pause-btn').addEventListener('click', function() {
+        if (audio.paused) {
+            audio.play();
+            this.textContent = 'Pause'; // Update button text to "Pause"
+        } else {
+            audio.pause();
+            this.textContent = 'Play'; // Update button text to "Play"
+        }
+    });
+
+    // Update progress bar as the audio plays
+    audio.addEventListener('timeupdate', function() {
+        const progress = document.getElementById('progress-bar');
+        progress.value = (audio.currentTime / audio.duration) * 100;
+    });
+
+    // Seek in the audio when the progress bar value changes
+    document.getElementById('progress-bar').addEventListener('input', function() {
+        const duration = audio.duration;
+        audio.currentTime = (this.value * duration) / 100;
+    });
+
+    // Mute toggle
+    document.getElementById('mute-btn').addEventListener('click', function() {
+        audio.muted = !audio.muted;
+        this.textContent = audio.muted ? 'Unmute' : 'Mute'; // Update button text based on mute state
+    });
+
+    // Volume control
+    document.getElementById('volume-control').addEventListener('input', function() {
+        audio.volume = this.value / 100;
+    });
+
+    // Initial volume (100%)
+    audio.volume = 1.0;
+}
+
 function playMusic(fileName) {
     if (isLoadingMusic && fileName === currentPlaying) {
         console.log("This song is already loading.");
@@ -157,33 +198,24 @@ function playMusic(fileName) {
         return;
     }
 
-    isLoadingMusic = true; // Moved here to handle the loading state correctly for a new song.
-    currentPlaying = fileName; // Update the currentPlaying variable to the new song.
+    isLoadingMusic = true;
+    currentPlaying = fileName;
 
     updatePlayingIndicator();
 
-    // 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);
+    document.getElementById('audio-player').style.display = 'flex'; // Show custom player UI
 
-    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
+    // Set the new source file for audio
+    audio.src = `/music/${fileName}`;
+    audio.load(); // Start loading the new source file
 
-    player.oncanplaythrough = () => {
-        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
+    audio.oncanplaythrough = () => {
+        isLoadingMusic = false;
+        document.getElementById('play-pause-btn').textContent = 'Pause'; // Update play/pause button
+        audio.play(); // Start playback
     };
 
-    player.onended = () => {
+    audio.onended = () => {
         if (!isLooping) {
             const currentIndex = trackList.indexOf(currentPlaying);
             if (currentIndex !== -1 && currentIndex < trackList.length - 1) {
@@ -192,9 +224,8 @@ function playMusic(fileName) {
         }
     };
 
-    player.onerror = () => {
-        isLoadingMusic = false; // Ensure flag is reset on error
-        loaderContainer.innerHTML = ''; // Clear out the loader element
+    audio.onerror = () => {
+        isLoadingMusic = false;
         alert(`Error loading the music: ${fileName}`);
         currentPlaying = ''; // Reset the current playing track
     };