alphadynamic00 · OmkarGarate · Oct 19, 2022
diff --git a/Spotify-clone/.vscode/settings.json b/Spotify-clone/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5503
+}
diff --git a/Spotify-clone/Images/1.jpg b/Spotify-clone/Images/1.jpg
diff --git a/Spotify-clone/Images/10.jpg b/Spotify-clone/Images/10.jpg
diff --git a/Spotify-clone/Images/2.jpg b/Spotify-clone/Images/2.jpg
diff --git a/Spotify-clone/Images/3.jpg b/Spotify-clone/Images/3.jpg
diff --git a/Spotify-clone/Images/4.jpg b/Spotify-clone/Images/4.jpg
diff --git a/Spotify-clone/Images/5.jpg b/Spotify-clone/Images/5.jpg
diff --git a/Spotify-clone/Images/6.jpg b/Spotify-clone/Images/6.jpg
diff --git a/Spotify-clone/Images/7.jpg b/Spotify-clone/Images/7.jpg
diff --git a/Spotify-clone/Images/8.jpg b/Spotify-clone/Images/8.jpg
diff --git a/Spotify-clone/Images/bg.jpg b/Spotify-clone/Images/bg.jpg
diff --git a/Spotify-clone/Images/bg1.jpg b/Spotify-clone/Images/bg1.jpg
diff --git a/Spotify-clone/Images/bg2.jpeg b/Spotify-clone/Images/bg2.jpeg
diff --git a/Spotify-clone/Images/bg3.png b/Spotify-clone/Images/bg3.png
diff --git a/Spotify-clone/Images/bg5.jpg b/Spotify-clone/Images/bg5.jpg
diff --git a/Spotify-clone/Images/equalizer.gif b/Spotify-clone/Images/equalizer.gif
diff --git a/Spotify-clone/Images/favicon-32x32.png b/Spotify-clone/Images/favicon-32x32.png
diff --git a/Spotify-clone/Images/favlogo.png b/Spotify-clone/Images/favlogo.png
diff --git a/Spotify-clone/Images/logo.png b/Spotify-clone/Images/logo.png
diff --git a/Spotify-clone/Songs/1.mp3 b/Spotify-clone/Songs/1.mp3
diff --git a/Spotify-clone/Songs/2.mp3 b/Spotify-clone/Songs/2.mp3
diff --git a/Spotify-clone/Songs/3.mp3 b/Spotify-clone/Songs/3.mp3
diff --git a/Spotify-clone/Songs/4.mp3 b/Spotify-clone/Songs/4.mp3
diff --git a/Spotify-clone/Songs/5.mp3 b/Spotify-clone/Songs/5.mp3
diff --git a/Spotify-clone/Songs/6.mp3 b/Spotify-clone/Songs/6.mp3
diff --git a/Spotify-clone/Songs/7.mp3 b/Spotify-clone/Songs/7.mp3
diff --git a/Spotify-clone/Songs/8.mp3 b/Spotify-clone/Songs/8.mp3
diff --git a/Spotify-clone/Songs/Baadal-Se-Dosti(PagalWorld).mp3 b/Spotify-clone/Songs/Baadal-Se-Dosti(PagalWorld).mp3
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
diff --git a/Spotify-clone/index.html b/Spotify-clone/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spotify - Your favourite music is here</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/Images/favicon-32x32.png">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <nav>
+        <ul>
+            <li class="brand"><img src="Images/logo.png" alt="Spotify">Spotify</li>
+            <li>Home</li>
+            <li>About</li>
+        </ul>
+    </nav>
+    <div class="container">
+        <div class="songList">
+            <h1>Best of my playlists</h1>
+            <div class="songItemContainer">
+                <div class="songItem">
+                    <img src="/Images/1.jpg" alt="1">
+                    <span class="songName">Chandigarh kare Ashiqui Remix</span>
+                    <span class="songlistplay"><span class="timeStamp">5:30 <i id="1" class="songItemPlay fa-regular fa-circle-play"></i></span></span>
+                </div>
+                <div class="songItem">
+                    <img src="/Images/2.jpg" alt="1">
+                    <span class="songName">Srivalli-Remix</span>
+                    <span class="songlistplay"><span class="timeStamp">5:30 <i id="2" class="songItemPlay fa-regular fa-circle-play"></i></span></span>
+                </div>                
+                <div class="songItem">
+                    <img src="/Images/3.jpg" alt="1">
+                    <span class="songName">I'll Be There For You x Woh Din</span>
+                    <span class="songlistplay"><span class="timeStamp">5:30 <i id="3" class="songItemPlay fa-regular fa-circle-play"></i></span></span>
+                </div>
+                <div class="songItem">
+                    <img src="/Images/4.jpg" alt="1">
+                    <span class="songName">Brown Munde</span>
+                    <span class="songlistplay"><span class="timeStamp">5:30 <i id="4" class="songItemPlay fa-regular fa-circle-play"></i></span></span>
+                </div>
+                <div class="songItem">
+                    <img src="/Images/5.jpg" alt="1">
+                    <span class="songName">Sakhiyaan</span>
+                    <span class="songlistplay"><span class="timeStamp">5:30 <i id="5" class="songItemPlay fa-regular fa-circle-play"></i></span></span>
+                </div>
+                <div class="songItem">
+                    <img src="/Images/6.jpg" alt="1">
+                    <span class="songName">Maar Khayega</span>
+                    <span class="songlistplay"><span class="timeStamp">5:30 <i id="6" class="songItemPlay fa-regular fa-circle-play"></i></span></span>
+                </div>
+                <div class="songItem">
+                    <img src="/Images/7.jpg" alt="1">
+                    <span class="songName">Main Agar Kahoon</span>
+                    <span class="songlistplay"><span class="timeStamp">5:30 <i id="7" class="songItemPlay fa-regular fa-circle-play"></i></span></span>
+                </div>
+                <div class="songItem">
+                    <img src="/Images/8.jpg" alt="1">
+                    <span class="songName">Lafda Zala</span>
+                    <span class="songlistplay"><span class="timeStamp" id="timeStamp">5:30<i id="8" class="songItemPlay fa-regular fa-circle-play"></i></span></span>
+                </div>
+
+            </div>
+        </div>
+        <div class="songBanner"></div>
+    </div>
+    <div class="bottom">
+        <input type="range" name="range" id="myProgressBar" min="0" value="0" max="100">
+        <div class="icons">
+            <!-- fontawesome icons -->
+            <i class="fa-solid fa-2x fa-backward-step" id="previous"></i>
+            <i class="fa-regular fa-2x fa-circle-play" id="masterPlay"></i>
+            <i class="fa-solid fa-2x fa-forward-step" id="next"></i>
+        </div>
+        <div class="songInfo"><img src="/Images/equalizer.gif" width="50px" id="gif"><span id="masterSongName">Chandigarh kare Ashiqui Remix</span></div>
+    </div>
+    <script src="https://kit.fontawesome.com/fd91f88bff.js" crossorigin="anonymous"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Spotify-clone/script.js 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')
+})
diff --git a/Spotify-clone/style.css 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;
+}