Create script.js

script.js

@@ -0,0 +1,47 @@
+let audio = new Audio();
+let currentPlaying = '';
+
+document.getElementById('toggle-play').addEventListener('click', function() {
+    if (audio.paused) {
+        audio.play();
+        this.textContent = 'Pause';
+    } else {
+        audio.pause();
+        this.textContent = 'Play';
+    }
+});
+
+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')
+        .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);
+            });
+            document.getElementById('loading').style.display = 'none';
+        });
+}
+
+// Search feature
+document.getElementById('search').addEventListener('input', function() {
+    fetchMusicList(this.value);
+});
+
+// Initial fetch
+fetchMusicList();