Update public/script.js

public/script.js

@@ -1,12 +1,12 @@
 window.onload = () => {
     loadMusicList();
     document.getElementById('search-bar').addEventListener('keyup', loadMusicList);
-
-    document.getElementById('audio-player').style.display = 'none';
 };
 
-let isLoadingMusic = false; // Global flag to manage loading state
-let currentPlaying = ''; // Variable to store the filename of the currently playing music
+let isLoadingMusic = false;
+let currentPlaying = '';
+let isLooping = false;
+let trackList = [];
 
 function loadMusicList() {
     const searchQuery = document.getElementById('search-bar').value.toLowerCase();
@@ -14,10 +14,14 @@ function loadMusicList() {
     fetch('/tracks')
         .then(response => response.json())
         .then(tracks => {
+            trackList = [];
             const musicList = document.getElementById('music-list');
             musicList.innerHTML = '';
-            tracks.forEach(track => {
+
+            tracks.forEach((track, index) => {
                 if (track.filename.toLowerCase().includes(searchQuery)) {
+                    trackList.push(track.filename);
+
                     const musicItem = document.createElement('div');
                     musicItem.classList.add('music-item');
 
@@ -27,14 +31,9 @@ function loadMusicList() {
                     playButton.addEventListener('click', () => playMusic(track.filename));
 
                     const artworkImg = document.createElement('img');
-                    if (track.artwork) {
-                        artworkImg.src = track.artwork;
-                        artworkImg.alt = 'Album Art';
-                        artworkImg.classList.add('album-art');
-                    } else {
-                        artworkImg.alt = '';
-                        artworkImg.classList.add('album-art');
-                    }
+                    artworkImg.src = track.artwork || "";
+                    artworkImg.alt = track.artwork ? 'Album Art' : '';
+                    artworkImg.classList.add('album-art');
 
                     const fileNameSpan = document.createElement('span');
                     fileNameSpan.textContent = track.filename;
@@ -49,47 +48,63 @@ function loadMusicList() {
 }
 
 function playMusic(fileName) {
-    // Check if the requested music is already playing
+    const player = document.getElementById('audio-player');
+
     if (isLoadingMusic || fileName === currentPlaying) {
-        console.log("This song is already loading or playing."); 
+        console.log("This song is already loading or playing.");
         return;
     }
 
-    isLoadingMusic = true; // Flag set when starting to load a new song
+    isLoadingMusic = true;
+    currentPlaying = fileName;
+
+    player.style.display = 'none';
 
-    const player = document.getElementById('audio-player');
-    
-    // Remove any existing loader to ensure we don't append multiple loaders
     const existingLoader = document.querySelector('.loader-container');
-    if (existingLoader) {
-        existingLoader.remove();
-    }
+    if (existingLoader) existingLoader.remove();
 
-    // Create and append the loader element
+    // Loader setup
     const loaderContainer = document.createElement('div');
     loaderContainer.classList.add('loader-container');
     const loaderElement = document.createElement('div');
     loaderElement.classList.add('loader');
     loaderContainer.appendChild(loaderElement);
-    const musicList = document.getElementById('music-list');
-    musicList.appendChild(loaderContainer);
 
-    player.style.display = 'none';
+    document.getElementById('music-list').appendChild(loaderContainer);
+
     player.src = `/music/${fileName}`;
     player.load();
 
     player.oncanplaythrough = () => {
-        isLoadingMusic = false; // Reset the flag when loading is complete
+        isLoadingMusic = false;
         loaderContainer.remove();
         player.style.display = '';
         player.play();
-        currentPlaying = fileName; // Update currentPlaying with the filename of the track that just loaded
     };
 
+    player.onended = () => handleTrackEnd();
+
     player.onerror = () => {
-        isLoadingMusic = false; // Reset the flag in case of an error
-        loaderContainer.remove();
         alert(`Error loading the music: ${fileName}`);
-        currentPlaying = ''; // Reset currentPlaying as there's no track loaded
+        isLoadingMusic = false;
+        loaderContainer.remove();
     };
-}
+}
+
+function handleTrackEnd() {
+    if (!isLooping) {
+        const currentIndex = trackList.indexOf(currentPlaying);
+        if (currentIndex !== -1 && currentIndex < trackList.length - 1) {
+            playMusic(trackList[currentIndex + 1]);
+        } else {
+            currentPlaying = ''; // Optionally reset playing track at the end of the list
+        }
+    }
+}
+
+function toggleLoop() {
+    isLooping = !isLooping;
+    const loopButton = document.getElementById('loop-toggle');
+    loopButton.textContent = `Loop: ${isLooping ? 'On' : 'Off'}`;
+    document.getElementById('audio-player').loop = isLooping;
+}}