Update public/script.js

public/script.js

@@ -10,29 +10,39 @@ 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 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);
-            }
+        .then(response => response.json())
+        .then(tracks => {
+            const musicList = document.getElementById('music-list');
+            musicList.innerHTML = '';
+            tracks.forEach(track => {
+                if (track.filename.toLowerCase().includes(searchQuery)) {
+                    const musicItem = document.createElement('div');
+                    musicItem.classList.add('music-item');
+
+                    const playButton = document.createElement('button');
+                    playButton.innerHTML = 'Play';
+                    playButton.classList.add('play-button');
+                    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 = 'No Album Art Available';
+                    }
+
+                    const fileNameSpan = document.createElement('span');
+                    fileNameSpan.textContent = track.filename;
+
+                    musicItem.appendChild(playButton);
+                    musicItem.appendChild(artworkImg);
+                    musicItem.appendChild(fileNameSpan);
+                    musicList.appendChild(musicItem);
+                }
+            });
         });
-    });
 }
 
 function playMusic(fileName) {