Update public/script.js

public/script.js

@@ -1,64 +1,62 @@
 window.onload = () => {
     loadMusicList();
-    // Event listener for search functionality
     document.getElementById('search-bar').addEventListener('keyup', loadMusicList);
+    
+    // Initially hide the audio player until a track is ready to be played
+    document.getElementById('audio-player').style.display = 'none';
 };
 
 function loadMusicList() {
     const searchQuery = document.getElementById('search-bar').value.toLowerCase();
 
     fetch('/tracks')
-        .then(response => response.json())
-        .then(files => {
-            const musicList = document.getElementById('music-list');
-            musicList.innerHTML = ''; // Clear existing music items
-            files.forEach(file => {
-                if (file.toLowerCase().includes(searchQuery)) {
-                    // For simplicity, initially just indicate tracks are available but not show them directly
-                    const placeholder = document.createElement('div');
-                    placeholder.textContent = "Track available - press Play";
-                    const playButton = document.createElement('button');
-                    playButton.textContent = "Play";
-                    playButton.onclick = () => {
-                        musicList.innerHTML = ''; // Clear the placeholder
-                        const loader = document.createElement('div');
-                        loader.className = 'loader';
-                        musicList.appendChild(loader); // Add loader while waiting for music to load
-                        playMusic(file);
-                    };
-                    musicList.appendChild(placeholder);
-                    musicList.appendChild(playButton);
-                }
-            });
+    .then(response => response.json())
+    .then(files => {
+        const musicList = document.getElementById('music-list');
+        musicList.innerHTML = ''; // Clear the list
+        files.forEach(file => {
+            if (file.toLowerCase().includes(searchQuery)) {
+                const musicItem = document.createElement('div');
+                musicItem.classList.add('music-item');
+
+                const playButton = document.createElement('button');
+                playButton.classList.add('play-button');
+                playButton.textContent = 'Play';
+                playButton.onclick = () => playMusic(file);
+
+                const fileNameSpan = document.createElement('span');
+                fileNameSpan.textContent = file;
+
+                musicItem.appendChild(playButton);
+                musicItem.appendChild(fileNameSpan);
+                musicList.appendChild(musicItem);
+            }
         });
+    });
 }
 
 function playMusic(fileName) {
     const player = document.getElementById('audio-player');
-    player.src = `/music/${fileName}`;
-    player.load(); // Force reload of the new source
-
-    player.oncanplaythrough = () => {
-        // Remove loader if there is any
-        const loader = document.querySelector('.loader');
-        if (loader) {
-            loader.remove();
-        }
+    
+    // Display the loader to indicate loading is in progress
+    const loaderElement = document.createElement('div');
+    loaderElement.textContent = 'Loading...'; // Text for simplicity, you could use a CSS-based loader as well
+    loaderElement.classList.add('loader');
+    const musicList = document.getElementById('music-list');
+    musicList.appendChild(loaderElement);
 
-        // Now that the track is loaded, adjust UI as needed e.g., show track info
-        const trackInfo = document.createElement('div');
-        trackInfo.textContent = `Now playing: ${fileName}`;
-        document.getElementById('music-list').appendChild(trackInfo);
+    player.style.display = 'none'; // Hide player until the track is loaded
+    player.src = `/music/${fileName}`;
+    player.load();
 
+    player.oncanplaythrough = () => {  // The track is fully loaded and ready to play
+        loaderElement.remove(); // Remove loader
+        player.style.display = ''; // Show the audio player
         player.play();
     };
 
     player.onerror = () => {
-        // Handle loading error
-        const loader = document.querySelector('.loader');
-        if (loader) {
-            loader.remove();
-        }
+        loaderElement.remove(); // Remove loader if there's an error loading the track
         alert(`Error loading the music: ${fileName}`);
     };
 }