Update public/script.js

public/script.js

@@ -1,47 +1,29 @@
-let audio = new Audio();
-let currentPlaying = '';
+window.onload = () => {
+    loadMusicList();
+    document.getElementById('search-bar').addEventListener('keyup', loadMusicList);
+};
 
-document.getElementById('toggle-play').addEventListener('click', function() {
-    if (audio.paused) {
-        audio.play();
-        this.textContent = 'Pause';
-    } else {
-        audio.pause();
-        this.textContent = 'Play';
-    }
-});
+function loadMusicList() {
+    const searchQuery = document.getElementById('search-bar').value.toLowerCase();
 
-function playMusic(filename) {
-    if (currentPlaying !== filename) {
-        audio.src = `/music/${filename}`;
-        currentPlaying = filename;
-    }
-    audio.play();
-    document.getElementById('toggle-play').textContent = 'Pause';
-}
-
-function fetchMusicList(query = '') {
-    document.getElementById('loading').style.display = 'block';
-    fetch('/music-list')
+    fetch('/tracks')
         .then(response => response.json())
         .then(files => {
-            const filteredFiles = files.filter(file => file.includes(query));
-            const musicListEl = document.getElementById('music-list');
-            musicListEl.innerHTML = '';
-            filteredFiles.forEach(file => {
-                const div = document.createElement('div');
-                div.textContent = file;
-                div.onclick = () => playMusic(file);
-                musicListEl.appendChild(div);
+            const musicList = document.getElementById('music-list');
+            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);
+                }
             });
-            document.getElementById('loading').style.display = 'none';
         });
 }
 
-// Search feature
-document.getElementById('search').addEventListener('input', function() {
-    fetchMusicList(this.value);
-});
-
-// Initial fetch
-fetchMusicList();
+function playMusic(fileName) {
+    const player = document.getElementById('audio-player');
+    player.src = `/music/${fileName}`;
+    player.play();
+}