diff --git a/1.jpg b/1.jpg new file mode 100644 index 0000000..554db42 Binary files /dev/null and b/1.jpg differ diff --git a/1.mp3 b/1.mp3 new file mode 100644 index 0000000..3b95e28 Binary files /dev/null and b/1.mp3 differ diff --git a/10.jpg b/10.jpg new file mode 100644 index 0000000..eae50e6 Binary files /dev/null and b/10.jpg differ diff --git a/10.mp3 b/10.mp3 new file mode 100644 index 0000000..2da6005 Binary files /dev/null and b/10.mp3 differ diff --git a/2.jpg b/2.jpg new file mode 100644 index 0000000..ac31314 Binary files /dev/null and b/2.jpg differ diff --git a/2.mp3 b/2.mp3 new file mode 100644 index 0000000..a5ffea4 Binary files /dev/null and b/2.mp3 differ diff --git a/3.jpg b/3.jpg new file mode 100644 index 0000000..69509e2 Binary files /dev/null and b/3.jpg differ diff --git a/3.mp3 b/3.mp3 new file mode 100644 index 0000000..ebdbae4 Binary files /dev/null and b/3.mp3 differ diff --git a/4.jpg b/4.jpg new file mode 100644 index 0000000..69c633c Binary files /dev/null and b/4.jpg differ diff --git a/4.mp3 b/4.mp3 new file mode 100644 index 0000000..2da6005 Binary files /dev/null and b/4.mp3 differ diff --git a/5.jpg b/5.jpg new file mode 100644 index 0000000..7e1416f Binary files /dev/null and b/5.jpg differ diff --git a/5.mp3 b/5.mp3 new file mode 100644 index 0000000..ff63552 Binary files /dev/null and b/5.mp3 differ diff --git a/6.jpg b/6.jpg new file mode 100644 index 0000000..05cfc0d Binary files /dev/null and b/6.jpg differ diff --git a/6.mp3 b/6.mp3 new file mode 100644 index 0000000..ff63552 Binary files /dev/null and b/6.mp3 differ diff --git a/7.jpg b/7.jpg new file mode 100644 index 0000000..bd80c63 Binary files /dev/null and b/7.jpg differ diff --git a/7.mp3 b/7.mp3 new file mode 100644 index 0000000..ebdbae4 Binary files /dev/null and b/7.mp3 differ diff --git a/8.jpg b/8.jpg new file mode 100644 index 0000000..a4d91d7 Binary files /dev/null and b/8.jpg differ diff --git a/8.mp3 b/8.mp3 new file mode 100644 index 0000000..3b95e28 Binary files /dev/null and b/8.mp3 differ diff --git a/9.jpg b/9.jpg new file mode 100644 index 0000000..bcd6e2b Binary files /dev/null and b/9.jpg differ diff --git a/9.mp3 b/9.mp3 new file mode 100644 index 0000000..ff63552 Binary files /dev/null and b/9.mp3 differ diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..384316f Binary files /dev/null and b/bg.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..37e1a46 --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ + + + + + + + Spotify - Your favourite music is here + + + + + + +
+
+

Best of NCS - No Copyright Sounds

+
+
+
+ 1 + Let me Love You + 03:50 +
+
+ 2 + Let me Love You + 02:33 +
+
+ 3 + Let me Love You + 04:33 +
+
+ 4 + Let me Love You + 04:27 +
+
+ 5 + Let me Love You + 03:28 +
+
+ 6 + Let me Love You + 03:28 +
+
+ 7 + Let me Love You + 04:33 +
+
+ 8 + Let me Love You + 03:50 +
+
+ 9 + Let me Love You + 03:28 +
+
+ 10 + Let me Love You + 04:27 +
+ +
+
+
+ + +
+ +
+ + + + +
+
+ Warriyo - Mortals [NCS Release] +
+
+ + + + + \ No newline at end of file diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..7bb2f2b Binary files /dev/null and b/logo.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..ee0aa85 --- /dev/null +++ b/script.js @@ -0,0 +1,113 @@ +console.log("Welcome to Spotify"); + +//Initialize the variables +let songIndex = 0; +let audioElement = new Audio('songs/1.mp3'); +let masterPlay = document.getElementById('masterPlay'); +let myProgressBar = document.getElementById('myProgressBar'); +let gif = document.getElementById('gif'); +let masterSongName = document.getElementById('masterSongName'); +let songItems =Array.from(document.getElementsByClassName('songItem')); + +let songs = [ + {songName: "Warriyo - Mortals [NCS Release]" , filePath: "songs/1.mp3" , coverPath: "1.jpg"}, + {songName: "Cielo - Hum-Huma" , filePath: "songs/2.mp3" , coverPath: "2.jpg"}, + {songName: "DEAF KEV - Invincible [NCS Release]-320k" , filePath: "songs/3.mp3" , coverPath: "3.jpg"}, + {songName: "Different Heaven & EH!DE - My Heart" , filePath: "songs/4.mp3" , coverPath: "4.jpg"}, + {songName: "Janji-Heroes-Tonight-feat-Johnning-NCS-Release" , filePath: "songs/5.mp3" , coverPath: "5.jpg"}, + {songName: "Rabba " , filePath: "songs/6.mp3" , coverPath: "6.jpg"}, + {songName: "Sakhiyaan" , filePath: "songs/7.mp3" , coverPath: "7.jpg"}, + {songName: "Bhula Dena" , filePath: "songs/8.mp3" , coverPath: "8.jpg"}, + {songName: "Tumhari Kasam" , filePath: "songs/9.mp3" , coverPath: "9.jpg"}, + {songName: "Na Jaana" , filePath: "songs/10.mp3" , coverPath: "10.jpg"}, +] + +songItems.forEach((element, i)=>{ + element.getElementsByTagName("img")[0].src = songs[i].coverPath; + element.getElementsByClassName("songName")[0].innerText = songs[i].songName; +}) + +// audioElement.play(); + +//Handle play/pause click + +masterPlay.addEventListener('click', ()=>{ + if(audioElement.paused || audioElement.currentTime<=0){ + audioElement.play(); + masterPlay.classList.remove('fa-play-circle'); + masterPlay.classList.add('fa-pause-circle'); + gif.style.opacity = 1; + } + else{ + audioElement.pause(); + masterPlay.classList.remove('fa-pause-circle'); + masterPlay.classList.add('fa-play-circle'); + gif.style.opacity = 0; + } +}) + +//Listen to events +audioElement.addEventListener('timeupdate' , ()=>{ + //Update Seekbar + progress = parseInt((audioElement.currentTime/audioElement.duration)*100); + myProgressBar.value = progress; +}) + +myProgressBar.addEventListener('change' , ()=>{ + audioElement.currentTime = (myProgressBar.value * audioElement.duration)/100 +}) + +const makeAllPlays = ()=>{ + Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{ + element.classList.add('fa-play-circle'); + element.classList.remove('fa-pause-circle'); + }) +} + +Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{ + element.addEventListener('click' , (e)=>{ + makeAllPlays(); + songIndex = parseInt(e.target.id); + e.target.classList.remove('fa-play-circle'); + e.target.classList.add('fa-pause-circle'); + masterSongName.innerText = songs[songIndex].songName; + audioElement.src = 'songs/{songIndex+1}.mp3'; + audioElement.currentTime = 0; + audioElement.play(); + gif.style.opacity = 1; + masterPlay.classList.remove('fa-play-circle'); + masterPlay.classList.add('fa-pause-circle'); + }) +}) + +document.getElementById('next').addEventListener('click' , ()=>{ + if(songIndex>=9){ + songIndex = 0; + } + else{ + songIndex += 1; + } + audioElement.src = 'songs/${songIndex+1}.mp3'; + masterSongName.innerText = songs[songIndex].songName; + audioElement.currentTime = 0; + audioElement.play(); + masterPlay.classList.remove('fa-play-circle'); + masterPlay.classList.add('fa-pause-circle'); +}) + + +document.getElementById('previous').addEventListener('click' , ()=>{ + if(songIndex<=0){ + songIndex = 0; + } + else{ + songIndex -= 1; + } + audioElement.src = 'songs/${songIndex+1}.mp3'; + masterSongName.innerText = songs[songIndex].songName; + audioElement.currentTime = 0; + audioElement.play(); + masterPlay.classList.remove('fa-play-circle'); + masterPlay.classList.add('fa-pause-circle'); +}) + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d78d5b2 --- /dev/null +++ b/style.css @@ -0,0 +1,122 @@ +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); +body { + background-color: antiquewhite; +} + +* { + margin: 0; + padding: 0; +} + +nav{ +font-family: 'Ubuntu', sans-serif ; +} + +nav ul{ + display: flex; + align-items: center; + list-style-type: none; + height: 65px; + background-color:black; + color: white; +} + +nav ul li{ + padding: 0 12px; +} + +.brand img{ + width: 16px; + padding: 0.8px; +} + +.brand{ + display: flex; + align-items: center; + font-weight: bolder; + font-size: 1.3rem; +} + +.container{ + min-height: 45vh; + background-color: black; + color: white; + font-family: 'Varela Round', sans-serif; + display: flex; + margin: 23px; + width: 90%; + border-radius: 12px; + padding: 34px; + background-image: url('bg.jpg'); +} + +.bottom{ + position: sticky; + height: 130px; + background-color: black; + color: white; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin: 12px 0; +} + +.icons{ + margin-top: 4px; +} + +.icons i{ + cursor: pointer; +} + +#myProgressBar{ + width: 80vw; + text-align: center; + cursor: pointer; +} + +.songItemContainer{ + margin-top: 74px; +} + +.songItem{ +height: 50px; +display: flex; +background-color: white; + +color: black; +margin: 12px 0; +justify-content: space-between; +align-items: center; +border-radius: 34px; +} + +.songItem img{ +width: 43px; +margin: 0 23px ; +border-radius: 34px; + +} + +.timestamp{ + margin: 0 23px; +} + +.timestamp i{ + cursor: pointer; +} + + +.songInfo{ + position: absolute; + left: 10vw; + font-family: 'Varela Round', sans-serif; +} + +.songInfo img{ + opacity: 0; + transition: opacity 0.4s ease-in; +} \ No newline at end of file