diff --git a/Spotify-clone/.vscode/settings.json b/Spotify-clone/.vscode/settings.json new file mode 100644 index 0000000..155422b --- /dev/null +++ b/Spotify-clone/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5503 +} \ No newline at end of file diff --git a/Spotify-clone/Images/1.jpg b/Spotify-clone/Images/1.jpg new file mode 100644 index 0000000..714c69f Binary files /dev/null and b/Spotify-clone/Images/1.jpg differ diff --git a/Spotify-clone/Images/10.jpg b/Spotify-clone/Images/10.jpg new file mode 100644 index 0000000..e8f258a Binary files /dev/null and b/Spotify-clone/Images/10.jpg differ diff --git a/Spotify-clone/Images/2.jpg b/Spotify-clone/Images/2.jpg new file mode 100644 index 0000000..b218247 Binary files /dev/null and b/Spotify-clone/Images/2.jpg differ diff --git a/Spotify-clone/Images/3.jpg b/Spotify-clone/Images/3.jpg new file mode 100644 index 0000000..1f45282 Binary files /dev/null and b/Spotify-clone/Images/3.jpg differ diff --git a/Spotify-clone/Images/4.jpg b/Spotify-clone/Images/4.jpg new file mode 100644 index 0000000..c0c0778 Binary files /dev/null and b/Spotify-clone/Images/4.jpg differ diff --git a/Spotify-clone/Images/5.jpg b/Spotify-clone/Images/5.jpg new file mode 100644 index 0000000..d6e8fba Binary files /dev/null and b/Spotify-clone/Images/5.jpg differ diff --git a/Spotify-clone/Images/6.jpg b/Spotify-clone/Images/6.jpg new file mode 100644 index 0000000..1155b35 Binary files /dev/null and b/Spotify-clone/Images/6.jpg differ diff --git a/Spotify-clone/Images/7.jpg b/Spotify-clone/Images/7.jpg new file mode 100644 index 0000000..7932854 Binary files /dev/null and b/Spotify-clone/Images/7.jpg differ diff --git a/Spotify-clone/Images/8.jpg b/Spotify-clone/Images/8.jpg new file mode 100644 index 0000000..9601804 Binary files /dev/null and b/Spotify-clone/Images/8.jpg differ diff --git a/Spotify-clone/Images/bg.jpg b/Spotify-clone/Images/bg.jpg new file mode 100644 index 0000000..f6d7a20 Binary files /dev/null and b/Spotify-clone/Images/bg.jpg differ diff --git a/Spotify-clone/Images/bg1.jpg b/Spotify-clone/Images/bg1.jpg new file mode 100644 index 0000000..04c192c Binary files /dev/null and b/Spotify-clone/Images/bg1.jpg differ diff --git a/Spotify-clone/Images/bg2.jpeg b/Spotify-clone/Images/bg2.jpeg new file mode 100644 index 0000000..c1cef0d Binary files /dev/null and b/Spotify-clone/Images/bg2.jpeg differ diff --git a/Spotify-clone/Images/bg3.png b/Spotify-clone/Images/bg3.png new file mode 100644 index 0000000..617aeb0 Binary files /dev/null and b/Spotify-clone/Images/bg3.png differ diff --git a/Spotify-clone/Images/bg5.jpg b/Spotify-clone/Images/bg5.jpg new file mode 100644 index 0000000..4b09395 Binary files /dev/null and b/Spotify-clone/Images/bg5.jpg differ diff --git a/Spotify-clone/Images/equalizer.gif b/Spotify-clone/Images/equalizer.gif new file mode 100644 index 0000000..e77bdb4 Binary files /dev/null and b/Spotify-clone/Images/equalizer.gif differ diff --git a/Spotify-clone/Images/favicon-32x32.png b/Spotify-clone/Images/favicon-32x32.png new file mode 100644 index 0000000..8cb13b9 Binary files /dev/null and b/Spotify-clone/Images/favicon-32x32.png differ diff --git a/Spotify-clone/Images/favlogo.png b/Spotify-clone/Images/favlogo.png new file mode 100644 index 0000000..ea17657 Binary files /dev/null and b/Spotify-clone/Images/favlogo.png differ diff --git a/Spotify-clone/Images/logo.png b/Spotify-clone/Images/logo.png new file mode 100644 index 0000000..b7250f9 Binary files /dev/null and b/Spotify-clone/Images/logo.png differ diff --git a/Spotify-clone/Songs/1.mp3 b/Spotify-clone/Songs/1.mp3 new file mode 100644 index 0000000..bc87f92 Binary files /dev/null and b/Spotify-clone/Songs/1.mp3 differ diff --git a/Spotify-clone/Songs/2.mp3 b/Spotify-clone/Songs/2.mp3 new file mode 100644 index 0000000..ec06b7f Binary files /dev/null and b/Spotify-clone/Songs/2.mp3 differ diff --git a/Spotify-clone/Songs/3.mp3 b/Spotify-clone/Songs/3.mp3 new file mode 100644 index 0000000..af7eafa Binary files /dev/null and b/Spotify-clone/Songs/3.mp3 differ diff --git a/Spotify-clone/Songs/4.mp3 b/Spotify-clone/Songs/4.mp3 new file mode 100644 index 0000000..db81e23 Binary files /dev/null and b/Spotify-clone/Songs/4.mp3 differ diff --git a/Spotify-clone/Songs/5.mp3 b/Spotify-clone/Songs/5.mp3 new file mode 100644 index 0000000..971eb68 Binary files /dev/null and b/Spotify-clone/Songs/5.mp3 differ diff --git a/Spotify-clone/Songs/6.mp3 b/Spotify-clone/Songs/6.mp3 new file mode 100644 index 0000000..fe52732 Binary files /dev/null and b/Spotify-clone/Songs/6.mp3 differ diff --git a/Spotify-clone/Songs/7.mp3 b/Spotify-clone/Songs/7.mp3 new file mode 100644 index 0000000..ed22931 Binary files /dev/null and b/Spotify-clone/Songs/7.mp3 differ diff --git a/Spotify-clone/Songs/8.mp3 b/Spotify-clone/Songs/8.mp3 new file mode 100644 index 0000000..6c5c7e1 Binary files /dev/null and b/Spotify-clone/Songs/8.mp3 differ diff --git a/Spotify-clone/Songs/Baadal-Se-Dosti(PagalWorld).mp3 b/Spotify-clone/Songs/Baadal-Se-Dosti(PagalWorld).mp3 new file mode 100644 index 0000000..f4e37cb Binary files /dev/null and b/Spotify-clone/Songs/Baadal-Se-Dosti(PagalWorld).mp3 differ diff --git a/Spotify-clone/Songs/Tum-Jo-Aaye-X-Tere-Bin-Nahin-Lagda(PagalWorld).mp3 b/Spotify-clone/Songs/Tum-Jo-Aaye-X-Tere-Bin-Nahin-Lagda(PagalWorld).mp3 new file mode 100644 index 0000000..ae91a68 Binary files /dev/null and b/Spotify-clone/Songs/Tum-Jo-Aaye-X-Tere-Bin-Nahin-Lagda(PagalWorld).mp3 differ diff --git a/Spotify-clone/index.html b/Spotify-clone/index.html new file mode 100644 index 0000000..eb5dd8f --- /dev/null +++ b/Spotify-clone/index.html @@ -0,0 +1,81 @@ + + + + + + + Spotify - Your favourite music is here + + + + + +
+
+

Best of my playlists

+
+
+ 1 + Chandigarh kare Ashiqui Remix + 5:30 +
+
+ 1 + Srivalli-Remix + 5:30 +
+
+ 1 + I'll Be There For You x Woh Din + 5:30 +
+
+ 1 + Brown Munde + 5:30 +
+
+ 1 + Sakhiyaan + 5:30 +
+
+ 1 + Maar Khayega + 5:30 +
+
+ 1 + Main Agar Kahoon + 5:30 +
+
+ 1 + Lafda Zala + 5:30 +
+ +
+
+
+
+
+ +
+ + + + +
+
Chandigarh kare Ashiqui Remix
+
+ + + + \ No newline at end of file diff --git a/Spotify-clone/script.js b/Spotify-clone/script.js new file mode 100644 index 0000000..1678d25 --- /dev/null +++ b/Spotify-clone/script.js @@ -0,0 +1,105 @@ +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 songItem=Array.from(document.getElementsByClassName('songItem')) + +let songs=[ + {songName:"Chandigarh Kare Ashiqui Remix", filePath:"/Songs/1.mp3", coverPath:"/Images/1.jpg"}, + {songName:"Srivalli-Remix", filePath:"/Songs/Srivalli-Remix(PagalWorld).mp3", coverPath:"/Images/2.jpg"}, + {songName:"I’ll-Be-There-For-You-x-Woh-Din", filePath:"/Songs/3.mp3", coverPath:"/Images/3.jpg"}, + {songName:"Brown-Munde", filePath:"/Songs/4.mp3", coverPath:"/Images/4.jpg"}, + {songName:"Sakhiyaan-Remix", filePath:"/Songs/5.mp3", coverPath:"/Images/5.jpg"}, + {songName:"Maar-Khayegaa", filePath:"/Songs/6.mp3", coverPath:"/Images/6.jpg"}, + {songName:"Main-Agar-Kahoon", filePath:"/Songs/7.mp3", coverPath:"/Images/7.jpg"}, + {songName:"Lafda-Zala", filePath:"/Songs/8.mp3 ", coverPath:"/Images/8.jpg"} +] + +songItem.forEach((element,i)=>{ + console.log(element, i) + element.getElementsByTagName("img")[0].src=songs[i].coverPath + element.getElementsByClassName("songName")[0].innerText=songs[i].songName +}) + +//Handle play/pause click +masterPlay.addEventListener('click', ()=>{ + if(audioElement.paused || audioElement.currentTime<=0) + { + audioElement.play(); + masterPlay.classList.remove('fa-circle-play') + masterPlay.classList.add('fa-circle-pause') + gif.style.opacity=1; + }else{ + audioElement.pause(); + masterPlay.classList.add('fa-circle-play') + masterPlay.classList.remove('fa-circle-pause') + gif.style.opacity=0; + } +}) + +//Listening Events +audioElement.addEventListener('timeupdate', ()=>{ + 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.remove('fa-circle-pause') + element.classList.add('fa-circle-play') + }) +} + +Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{ + element.addEventListener('click',(e)=>{ + makeAllPlays(); + songIndex=parseInt(e.target.id) + e.target.classList.remove('fa-circle-play') + e.target.classList.add('fa-circle-pause') + audioElement.src=`Songs/${songIndex}.mp3` + masterSongName.innerText=songs[songIndex-1].songName + audioElement.currentTime=0 + audioElement.play(); + gif.style.opacity=1; + masterPlay.classList.remove('fa-circle-play') + masterPlay.classList.add('fa-circle-pause') + }) +}) + +document.getElementById('next').addEventListener('click',()=>{ + if(songIndex>=8) + { + songIndex=1; + }else{ + songIndex+=1; + } + audioElement.src=`Songs/${songIndex}.mp3` + masterSongName.innerText=songs[songIndex-1].songName + audioElement.currentTime=0 + audioElement.play(); + gif.style.opacity=1; + masterPlay.classList.remove('fa-circle-play') + masterPlay.classList.add('fa-circle-pause') +}) + +document.getElementById('previous').addEventListener('click',()=>{ + if(songIndex<=1) + { + songIndex=8; + }else{ + songIndex-=1; + } + audioElement.src=`Songs/${songIndex}.mp3` + masterSongName.innerText=songs[songIndex-1].songName + audioElement.currentTime=0 + audioElement.play(); + gif.style.opacity=1; + masterPlay.classList.remove('fa-circle-play') + masterPlay.classList.add('fa-circle-pause') +}) \ No newline at end of file diff --git a/Spotify-clone/style.css b/Spotify-clone/style.css new file mode 100644 index 0000000..a95896e --- /dev/null +++ b/Spotify-clone/style.css @@ -0,0 +1,120 @@ +@import url('https://fonts.googleapis.com/css2?family=Ubuntu&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:'sans-serif', 'Ubuntu'; +} + +nav ul{ + display: flex; + align-items: center; + list-style-type: none; + height: 50px; + background-color: black; + color: white; +} + +.brand{ + display: flex; + align-items: center; + font-weight: bolder; + font-size: 1rem; +} + +.brand img{ + width: 35px; + padding: 0 8px; +} + +nav ul li{ + padding: 10px 12px; +} + +.container{ + min-height: 67vh; + background-color: black; + color: white; + font-family:'sans-serif', 'Ubuntu'; + font-size: 15px; + display: flex; + width: 70%; + border-radius: 12px; + padding: 20px; + margin: 20px auto; + background-image: url('Images/bg.jpg'); + background-repeat: no-repeat; + background-position: right; +} + +.bottom{ + position: absolute; + width:100%; + height: 90px; + background-color: black; + bottom: 0; + color: white; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.icons{ + margin-top: 14px; +} + +.icons i{ + cursor: pointer; +} + +#myProgressBar{ + width: 80vw; + cursor: pointer +} + +.songItemContainer{ + margin-top: 20px; +} + +.songItem{ + height: 35px; + margin: 10px; + align-items: center; + justify-content: space-between; + display: flex; + background-color: white; + border-radius: 30px; + color: black; +} + +.songItem img{ + width: 32px; + margin: 0 15px; + border-radius: 34px; +} + +.timeStamp{ + margin: 0 23px; +} + +.timeStamp i{ + cursor: pointer; +} + +.songInfo{ + position: absolute; + left:10vw; +} + +.songInfo img{ + opacity: 0; + transition: opacity 0.4s ease-in; +}