From 5fae018e4c0cebe664ea0caaa33f8e85adfd6c01 Mon Sep 17 00:00:00 2001
From: rajkr99 <rjprakash321@gmail.com>
Date: Mon, 15 Jun 2026 14:02:29 +0530
Subject: [PATCH] fix: add audio element and wire up play/pause/prev/next
 conttrols

---
 static/js/script.js  | 45 +++++++++++++++++++++++++++++++++++++++++++-
 templates/index.html |  8 +++++---
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/static/js/script.js b/static/js/script.js
index 17ae110..eb2676d 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -41,4 +41,47 @@ document.addEventListener("DOMContentLoaded", () => {
       updateIcon(savedVolume);
     }
   });
-});
\ No newline at end of file
+});
+
+// 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();
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 22eb601..fa73deb 100644
--- a/templates/index.html
+++ b/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>
\ No newline at end of file