From ea03aa415e499afae0cd2ce41fbcbdbc6543018a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 27 Aug 2025 08:56:12 +0000 Subject: [PATCH 1/2] Initial plan From a4060fd3723f86018a38d8ee2c8ecfedeb6cd178 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 27 Aug 2025 09:03:20 +0000 Subject: [PATCH 2/2] Complete Spotify clone enhancement with dynamic song list and interactive controls Co-authored-by: MrCoder420 <136161109+MrCoder420@users.noreply.github.com> --- index.html | 18 ++------- script.js | 117 ++++++++++++++++++++++++++++++++++++++++++++--------- style.css | 21 ++++++++++ 3 files changed, 123 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 5bdc7bf..4c1514c 100644 --- a/index.html +++ b/index.html @@ -25,19 +25,7 @@

Best of NCS - No Copyright Sound

-
- 1 - Mai Hoo Na - - - 5:35 - - -
- - - - +
@@ -49,12 +37,12 @@

Best of NCS - No Copyright Sound

- + fast_rewind play_circle - fast_forward + fast_forward diff --git a/script.js b/script.js index b96b282..6e2a9db 100644 --- a/script.js +++ b/script.js @@ -2,22 +2,103 @@ 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 = ` + ${index + 1} + ${song.songName} + + ${song.duration} + play_arrow + + `; + 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(); + @@ -25,20 +106,18 @@ let gif= document.getElementById("gif"); 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); + diff --git a/style.css b/style.css index 45250cf..7c03b01 100644 --- a/style.css +++ b/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; }