Update public/script.js

public/script.js

@@ -13,10 +13,20 @@ function loadMusicList() {
             musicList.innerHTML = '';
             files.forEach(file => {
                 if (file.toLowerCase().includes(searchQuery)) {
-                    const listItem = document.createElement('div');
-                    listItem.innerHTML = file;
-                    listItem.addEventListener('click', () => playMusic(file));
-                    musicList.appendChild(listItem);
+                    const musicItem = document.createElement('div');
+                    musicItem.classList.add('music-item');
+
+                    const playButton = document.createElement('button');
+                    playButton.classList.add('play-button');
+                    playButton.innerHTML = 'Play';
+                    playButton.addEventListener('click', () => playMusic(file));
+                    
+                    const fileNameSpan = document.createElement('span');
+                    fileNameSpan.textContent = file;
+
+                    musicItem.appendChild(playButton);
+                    musicItem.appendChild(fileNameSpan);
+                    musicList.appendChild(musicItem);
                 }
             });
         });
@@ -24,6 +34,22 @@ function loadMusicList() {
 
 function playMusic(fileName) {
     const player = document.getElementById('audio-player');
+    const loader = document.createElement('div');
+    loader.classList.add('loader');
+
+    const musicList = document.getElementById('music-list');
+    musicList.appendChild(loader);  // Show loader
+    
     player.src = `/music/${fileName}`;
-    player.play();
+    player.load();  // Important to reload if changing source
+
+    player.oncanplaythrough = () => {  // Use the 'canplaythrough' event to know when the track is loaded
+        loader.remove();  // Hide loader when music is ready to play
+        player.play();
+    };
+
+    player.onerror = () => {  // In case there is an error loading the music file.
+        loader.remove();
+        alert(`Error loading the music: ${fileName}`);
+    };
 }