added

Author: nirajxdev

11_muic-player-clone/image.png

@@ -11,4 +11,76 @@ let timeDuration = document.getElementById('time-duration');
 let currentTime = DocumentFragment.getElementById('current-time');
 let totalTime = DocumentFragment.getElementById('total-time');
 
-let volumeSlider = document.getElementById('volume-slider');
+let volumeSlider = document.getElementById('volume-slider');
+
+let trackIndex = 0;
+let isPlaying = false;
+let updateTimer;
+
+let curr_track = document.createElement('audio');
+let track_list = [
+    {
+        name: "Night Owl",
+        artist: "Broke For Free",
+        image: "./image.png",
+        path: "./music/file_example_MP3_2MG.mp3"
+    },
+    {
+        name: "Random Owl",
+        artist: "Broke For Free",
+        image: "Image URL",
+        path: "./music/sample-6s.mp3"
+    },
+    {
+        name: "MidNight Owl",
+        artist: "Broke For Free",
+        image: "Image URL",
+        path: "../music/sample-9s.mp3"
+    },
+    {
+        name: "Day Owl",
+        artist: "Broke For Free",
+        image: "Image URL",
+        path: "/music/sample-12s.mp3"
+    },
+    {
+        name: "ABCD Owl",
+        artist: "Broke For Free",
+        image: "Image URL",
+        path: "/music/sample-15s.mp3"
+    },
+]
+
+function loadTrack(trackIndex) {
+    clearInterval(updateTimer);
+    resetValues();
+
+    curr_track.src = track_list[trackIndex].path;
+    curr_track.load();
+
+    trackArt.style.backgroundImage = "url(" + track_list[trackIndex].image + ")";
+    trackName.textContent = track_list[trackIndex].name;
+    trackArtist.textContent = track_list[trackIndex].artist;
+    nowPlaying.textContent = "PLAYING " + (trackIndex + 1) + " OF " + track_list.length;
+
+    updateTimer = setInterval(seekUpdate, 1000);
+    curr_track.addEventListener("ended", nextBtn);
+    random_bg_color();
+}
+
+function resetValues() {
+    currentTime.textContent = "00.00";
+    totalTime.textContent = "00.00";
+    volumeSlider.value = 0;
+}
+
+function random_bg_color() {
+    let red = Math.floor(Math.random() * 256) + 64;
+    let green = Math.floor(Math.random() * 256) + 64;
+    let blue = Math.floor(Math.random() * 256) + 64;
+
+    let bgColor = "rgb(" + red + ", " + green + ", " + blue + ")";
+    document.body.style.background = bgColor;
+}
+
+