fix: add audio element and wire up play/pause/prev/next conttrols

static/js/script.js

@@ -41,4 +41,47 @@ document.addEventListener("DOMContentLoaded", () => {
       updateIcon(savedVolume);
     }
   });
-});
+});
+
+// Audio Player
+const audio   = document.getElementById('player');
+const playBtn = document.getElementById('btn-play');
+const prevBtn = document.getElementById('btn-prev');
+const nextBtn = document.getElementById('btn-next');
+
+let songs      = [];
+let currentIdx = 0;
+
+async function loadSongs() {
+  const res = await fetch('/api/songs');
+  songs     = await res.json();
+  if (songs.length > 0) setSong(0);
+}
+
+function setSong(idx) {
+  currentIdx = idx;
+  audio.src  = songs[idx].url;
+  audio.load();
+}
+
+playBtn.addEventListener('click', () => {
+  audio.paused ? audio.play() : audio.pause();
+});
+
+audio.addEventListener('play',  () => { playBtn.textContent = '⏸'; });
+audio.addEventListener('pause', () => { playBtn.textContent = '▶'; });
+
+prevBtn.addEventListener('click', () => {
+  setSong((currentIdx - 1 + songs.length) % songs.length);
+  audio.play();
+});
+
+nextBtn.addEventListener('click', () => goNext());
+audio.addEventListener('ended',   () => goNext());
+
+function goNext() {
+  setSong((currentIdx + 1) % songs.length);
+  audio.play();
+}
+
+loadSongs();

templates/index.html

@@ -50,9 +50,9 @@ <h1 class="track-title">Feel The Music</h1>
           </p>
 
           <div class="player-controls">
-            <button class="ctrl">⏮</button>
-            <button class="ctrl ctrl-play">▶</button>
-            <button class="ctrl">⏭</button>
+            <button class="ctrl" id="btn-prev">⏮</button>
+            <button class="ctrl ctrl-play" id="btn-play">▶</button>
+            <button class="ctrl" id="btn-next">⏭</button>
 
             <div class="volume-wrapper">
               <button class="ctrl ctrl-volume" id="mute-btn">🔊</button>
@@ -133,6 +133,8 @@ <h2>Popular Songs</h2>
   </footer>
 
   <script src="/static/js/script.js"></script>
+
+  <audio id="player" preload="auto"></audio>
 
 </body>
 </html>