Enhance Spotify clone with dynamic playlist, interactive controls, and multi-song support

index.html

@@ -25,19 +25,7 @@
         <div class="songlist">
             <h1>Best of NCS - No Copyright Sound</h1>
             <div class="songitemcontainer">
-                <div class="song-item">
-                    <img src="cover1.jpeg" alt="1">
-                    <span>Mai Hoo Na </span>
-
-                    <i class="material-icons fa--circle" style="color:rgb(10, 1, 1);"> </i>
-                    <span class="songlistplay"><span class="timestamp">5:35 </span>  </span>
-
-
-                </div>
-
-
-
-
+                <!-- Songs will be dynamically rendered here -->
             </div>
         </div>
 
@@ -49,12 +37,12 @@ <h1>Best of NCS - No Copyright Sound</h1>
         <input type="range" name="range" id="mypb" value="0" min="0" max="100" style="color: greenyellow;">
         <div class="icons">
 
-            <span class="material-icons" style="font-size:60px;color:rgb(219, 211, 211);">
+            <span class="material-icons" id="previous" style="font-size:60px;color:rgb(219, 211, 211);cursor:pointer;">
                 fast_rewind
                 </span>
             <i class="material-icons fa-play-circle" id="masterPlay" style="font-size:60px;color:rgb(237, 235, 235);"> play_circle</i>
 
-            <i class="material-icons" style="font-size:60px;color:rgb(237, 235, 235);"> fast_forward</i>
+            <i class="material-icons" id="next" style="font-size:60px;color:rgb(237, 235, 235);cursor:pointer;"> fast_forward</i>
 
 
 

script.js

@@ -2,43 +2,122 @@ console.log("welcome to spotify");
 
 let songs = [
     {
-         filePath: "Main Hoon Na - Main Hoon Na 128 Kbps (1).mp3"
-
+        songName: "Main Hoon Na",
+        filePath: "Main Hoon Na - Main Hoon Na 128 Kbps (1).mp3",
+        coverPath: "cover1.jpeg",
+        duration: "5:35"
     },
-
-
-
-
+    {
+        songName: "Kitni Baatein",
+        filePath: "128-Kitni Baatein - Lakshya 128 Kbps.mp3",
+        coverPath: "cover1.jpeg",
+        duration: "4:20"
+    }
 ]
 
-let audioElement = new Audio(songs[0]);
+let audioElement = new Audio(songs[0].filePath);
 // audioElement.play();
 let songIndex = 0;
 let masterPlay = document.getElementById("masterPlay");
 let myPrograssBar = document.getElementById("mypb");
 let gif= document.getElementById("gif");
 
+// Function to render songs dynamically
+function renderSongs() {
+    const songItemContainer = document.querySelector('.songitemcontainer');
+    songItemContainer.innerHTML = '';
+
+    songs.forEach((song, index) => {
+        const songItem = document.createElement('div');
+        songItem.className = 'song-item';
+        songItem.innerHTML = `
+            <img src="${song.coverPath}" alt="${index + 1}">
+            <span class="songname">${song.songName}</span>
+            <span class="songlistplay">
+                <span class="timestamp">${song.duration}</span>
+                <i class="material-icons songitemplay" id="${index}" data-index="${index}">play_arrow</i>
+            </span>
+        `;
+        songItemContainer.appendChild(songItem);
+    });
+
+    // Add click listeners to song items
+    Array.from(document.getElementsByClassName('songitemplay')).forEach((element) => {
+        element.addEventListener('click', (e) => {
+            const index = parseInt(e.target.dataset.index);
+            playSong(index);
+        });
+    });
+}
+
+// Function to play a specific song
+function playSong(index) {
+    // Reset all play buttons
+    Array.from(document.getElementsByClassName('songitemplay')).forEach((element) => {
+        element.innerHTML = 'play_arrow';
+    });
+
+    songIndex = index;
+    audioElement.src = songs[songIndex].filePath;
+    audioElement.currentTime = 0;
+    audioElement.play();
+
+    // Update UI
+    document.getElementById(`${index}`).innerHTML = 'pause';
+    masterPlay.innerHTML = 'pause';
+    gif.style.opacity = 1;
+
+    // Update song info
+    updateSongInfo();
+}
+
+// Function to update song information in the player
+function updateSongInfo() {
+    document.querySelector('.songinfo .name').innerText = songs[songIndex].songName;
+}
+
+// Function to play next song
+function playNext() {
+    if (songIndex >= songs.length - 1) {
+        songIndex = 0;
+    } else {
+        songIndex += 1;
+    }
+    playSong(songIndex);
+}
+
+// Function to play previous song
+function playPrevious() {
+    if (songIndex <= 0) {
+        songIndex = songs.length - 1;
+    } else {
+        songIndex -= 1;
+    }
+    playSong(songIndex);
+}
+
+// Initialize the app
+renderSongs();
+
 
 
 
 
 masterPlay.addEventListener('click', () => {
     if(audioElement.paused || audioElement.currentTime<=0){
         audioElement.play();
-        document.getElementById("masterPlay").innerHTML ="pause";
+        masterPlay.innerHTML ="pause";
         gif.style.opacity=1;
-
-
+        // Update the current song's play button
+        document.getElementById(`${songIndex}`).innerHTML = 'pause';
     }
     else{
         audioElement.pause();
-        document.getElementById("masterPlay").innerHTML ="play_circle";
+        masterPlay.innerHTML ="play_circle";
         gif.style.opacity=0;
-
-
+        // Update the current song's play button
+        document.getElementById(`${songIndex}`).innerHTML = 'play_arrow';
     }
-
-
 })
 
 audioElement.addEventListener('timeupdate', () => {
@@ -55,10 +134,12 @@ audioElement.addEventListener('timeupdate', () => {
 })
 
 myPrograssBar.addEventListener('change',()=>{
-
-
-
+    audioElement.currentTime = (myPrograssBar.value * audioElement.duration) / 100;
 })
 
+// Add event listeners for next and previous buttons
+document.getElementById('next').addEventListener('click', playNext);
+document.getElementById('previous').addEventListener('click', playPrevious);
+
 
 

style.css

@@ -98,6 +98,27 @@ padding: 02px;
     cursor: pointer;
 }
 
+.songname {
+    flex: 1;
+}
+
+.songlistplay {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.songitemplay {
+    font-size: 24px !important;
+    padding: 8px;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+}
+
+.songitemplay:hover {
+    background-color: #f0f0f0;
+}
+
 .songitemcontainer{
     margin-top: 74px;
 }