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 audioElement = new Audio();
 
 window.onload = () => {
     // Attach click handlers for paging
@@ -148,7 +149,9 @@ function updatePlayingIndicator() {
     });
 }
 
-// Update the playMusic function to remove the player.style.display manipulations since we won't hide the audio element anymore.
+let audioElement = new Audio(); // Use the Audio constructor for creating the audio element
+
+// Replace or modify the `playMusic` function to manage the custom player:
 function playMusic(fileName) {
     if (isLoadingMusic && fileName === currentPlaying) {
         console.log("This song is already loading.");
@@ -158,84 +161,78 @@ function playMusic(fileName) {
         return;
     }
 
-    console.log("Trying to play: ", fileName);
-
-    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');
-    player.src = `/music/${fileName}`; // Make sure this path is correct
-    console.log("Set audio source to: ", player.src);
-    player.load();
-
-    player.oncanplaythrough = () => {
-        console.log("Audio can play through, starting playback...");
-        isLoadingMusic = false;
-        document.getElementById('loader-container').innerHTML = ''; // Remove the loader element
-        player.play();
-        player.loop = isLooping;
-        updateDuration();
-        document.getElementById('play-pause-btn').textContent = 'Pause'; // Update button label
+    // Hide the loader if used
+    document.getElementById('loader-container').innerHTML = ''; // Clears any existing loader elements
+
+    audioElement.src = `/music/${fileName}`; // Set the new source file
+    audioElement.load(); // Start loading the new source file
+    handlePlayPause(); // Play the loaded track and update UI accordingly
+
+    audioElement.oncanplaythrough = () => {
+        isLoadingMusic = false; // Update the loading flag when ready to play
+        handlePlayPause(true); // Play the loaded track and update UI accordingly
     };
 
-    player.onerror = (e) => {
-        console.error("Error loading the audio: ", e);
-        isLoadingMusic = false;
-        document.getElementById('loader-container').innerHTML = ''; // Clear out the loader element
-        alert(`Error loading the music: ${fileName}`);
-        currentPlaying = '';
+    audioElement.ontimeupdate = () => {
+        // Update the progress bar and time labels
+        updateProgress();
     };
 
-    // Add an alternative event listener as a test
-    player.onloadeddata = () => {
-        console.log("Audio data loaded, src: ", player.src);
+    audioElement.onended = () => {
+        if (!isLooping) {
+            const currentIndex = trackList.indexOf(currentPlaying);
+            if (currentIndex !== -1 && currentIndex < trackList.length - 1) {
+                playMusic(trackList[currentIndex + 1]);
+            }
+        }
+    };
+
+    audioElement.onerror = () => {
+        isLoadingMusic = false; // Ensure flag is reset on error
+        alert(`Error loading the music: ${fileName}`);
+        currentPlaying = ''; // Reset the current playing track
     };
 }
 
-// Add functions to manage the custom controls
-function togglePlayPause() {
-    const player = document.getElementById('audio-player');
+// Adapt or integrate the `toggleLoop` and other utility functions as needed.
+
+// Function to handle play/pause actions and update UI.
+function handlePlayPause(shouldPlay = false) {
     const playPauseBtn = document.getElementById('play-pause-btn');
-    
-    if (player.paused) {
-        player.play();
+    if (shouldPlay || audioElement.paused) {
+        audioElement.play();
         playPauseBtn.textContent = 'Pause';
     } else {
-        player.pause();
+        audioElement.pause();
         playPauseBtn.textContent = 'Play';
     }
 }
 
-// Invoke this function within playMusic's oncanplaythrough
-function updateDuration() {
-    const player = document.getElementById('audio-player');
-    document.getElementById('total-time').textContent = formatTime(player.duration);
-    document.getElementById('seek-bar').max = player.duration;
+// Function to update progress bar and time labels.
+function updateProgress() {
+    const progress = document.getElementById('progress');
+    const currentTime = document.getElementById('current-time');
+    const duration = document.getElementById('duration');
+    
+    const progressPercent = (audioElement.currentTime / audioElement.duration) * 100;
+    progress.style.width = `${progressPercent}%`;
+
+    currentTime.textContent = formatTime(audioElement.currentTime);
+    duration.textContent = formatTime(audioElement.duration);
 }
 
+// Utility function to format time from seconds to M:SS
 function formatTime(seconds) {
-    let min = Math.floor((seconds / 60));
-    let sec = Math.floor(seconds - (min * 60));
-    if (sec < 10){ 
-        sec  = `0${sec}`;
-    }
-    return `${min}:${sec}`;
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
+    return `${mins}:${secs}`;
 }
 
-// Initiate listeners
-document.getElementById('play-pause-btn').addEventListener('click', togglePlayPause);
-
-document.getElementById('audio-player').addEventListener('timeupdate', () => {
-    const player = document.getElementById('audio-player');
-    document.getElementById('seek-bar').value = player.currentTime;
-    document.getElementById('current-time').textContent = formatTime(player.currentTime);
-});
-
-document.getElementById('seek-bar').addEventListener('input', (e) => {
-    const player = document.getElementById('audio-player');
-    player.currentTime = e.target.value;
-});
-
-// Add listeners for other controls as needed (e.g., next, previous)
+document.getElementById('play-pause-btn').addEventListener('click', () => {
+    handlePlayPause();
+});