I am making a music player and to make a play pause button work , I am trying to execute the following code:
HTML:
<!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</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li class="brand"><img src="./others/logo.png" alt="Spotify">Spotify</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div class="container">
<div class="songList">
<h1>Best of NCS</h1>
<div class="songItemContainer">
<div>
<div class="songItem">
<img alt="1" >
<span class = "songName"></span>
<span class="songlistplay"><span class="timeStamp">05:34</span><i id = "0" class="songItemPlay fa-regular fa-circle-play"></i> </span>
</div>
<div class="songItem">
<img alt="2" >
<span class = "songName"></span>
<span class="songlistplay"><span class="timeStamp">05:34</span><i id = "1" class="songItemPlay fa-regular fa-circle-play"></i> </span>
</div>
<div class="songItem">
<img alt="3" >
<span class = "songName"></span>
<span class="songlistplay"><span class="timeStamp">05:34</span><i id = "2" class="songItemPlay fa-regular fa-circle-play"></i> </span>
</div>
<div class="songItem">
<img alt="4" >
<span class = "songName"></span>
<span class="songlistplay"><span class="timeStamp">05:34</span><i id = "3" class="songItemPlay fa-regular fa-circle-play"></i> </span>
</div>
<div class="songItem">
<img alt="5" >
<span class = "songName"></span>
<span class="songlistplay"><span class="timeStamp">05:34</span><i id = "4" class="songItemPlay fa-regular fa-circle-play"></i> </span>
</div>
<div class="songItem">
<img alt="6" >
<span class = "songName">r</span>
<span class="songlistplay"><span class="timeStamp">05:34</span><i id = "5" class="songItemPlay fa-regular fa-circle-play"></i> </span>
</div>
<div class="songItem">
<img alt="7" height="44px" width="44px" >
<span class = "songName"></span>
<span class="songlistplay"><span class="timeStamp">05:34</span><i id = "6" class="songItemPlay fa-regular fa-circle-play"></i> </span>
</div>
</div>
</div>
</div>
<div class="songBanner"></div>
</div>
<div class="bottom">
<input type="range" name="range" id="myProgressBar" min ='0' max = "100" value="0">
<div class="icons">
<!-- fontawesome icons -->
<i class="fa-solid fa-3x fa-backward-step" id="previous"></i>
<i class="fa-regular fa-3x fa-circle-play" id="masterPlay"></i>
<i class="fa-solid fa-3x fa-forward-step" id="next"></i>
</div>
<div class="songInfo">
<img src="./others/playing.gif" id="gif" alt=""> <p id="songInfo"></p>
</div>
</div>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/d76649665f.js" crossorigin="anonymous"></script>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
*{
margin: 0;
padding: 0;
}
body{
background-color: antiquewhite;
}
nav{
font-family: 'Roboto Condensed', sans-serif;
}
nav ul{
display: flex;
align-items: center;
list-style: none;
height: 9vh;
background-color:black ;
color: white;
}
nav ul li{
padding-left: 3vw;
}
.brand{
padding-left: 1vw;
display: flex;
flex-direction: column;
align-items: center;
font-weight: bolder;
}
.brand img {
width: 3vw;
height: 5vh;
}
.container{
min-height: 71vh;
background-color: black;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
display: flex;
margin: 3vh auto;
border-radius: 12px;
width: 70%;
background-image: url(./others/uwp2726170.jpeg);
background-repeat: no-repeat;
background-size: cover;
}
.bottom{
position: sticky;
height: 14vh;
background-color: black;
bottom:0;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-direction: column;
}
.icons{
margin-top:1.5vh ;
}
.icons i{
cursor: pointer;
}
#myProgressBar{
width: 80vw;
cursor: pointer;
}
.songItem{
display: flex;
height: 6vh;
width: 25vw;
margin: 1.5vh 2vw;
justify-content: space-around;
align-items: center;
border-color: whitesmoke;
border-style: ridge;
border-radius: 34px;
border-width:0.2px ;
}
.songItem:hover{
background-color: #e2a3e8;
color: black;
}
.songItem img{
width: 3vw;
border-radius: 26px;
}
.timeStamp{
margin: 0 0.5vw
}
.songList{
padding: 2vh;
text-align: center;
}
.songlistplay i{
cursor: pointer;
}
.songItemContainer{
margin-top: 8vh;
}
.songInfo{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position:absolute;
left: 10vw;
}
.songInfo img{
width: 3vw;
}
.songInfo img{
opacity: 0;
transition: opacity 0.8s ease-in;
}
JS:
console.log("Welcome to Spotify ! ")
// Initialize the variables
let songIndex =0;
let masterPlay = document.getElementById('masterPlay')
let myProgressBar = document.getElementById('myProgressBar')
let gif = document.getElementById('gif')
let songItems = Array.from(document.getElementsByClassName('songItem'))
let songInfo = document.getElementById('songInfo')
let songs =[
{songName: "GOAT", filePath: "./songs/GOAT.mp3",coverPath: "./covers/cover1.jpg"},
{songName: "Alone", filePath: "./songs/Alone.mp3",coverPath: "./covers/cover2.jpg"},
{songName: "Homicide", filePath: "./songs/Homicide.mp3",coverPath: "./covers/cover3.jpg"},
{songName: "Satisfy", filePath: "./songs/Satisfy.mp3",coverPath: "./covers/cover4.jpg"},
{songName: "Levels", filePath: "./songs/Levels.mp3",coverPath: "./covers/cover5.jpeg"},
{songName: "Game Over", filePath: "./songs/GameOver.mp3",coverPath: "./covers/cover6.jpg"},
{songName: "OG", filePath: "./songs/OG.mp3",coverPath: "./covers/cover7.png"},
];
let audioElement = new Audio(songs[0].filePath);
songInfo.innerText = songs[0].songName
songItems.forEach((element,i)=>{
element.getElementsByTagName('img')[0].src = songs[i].coverPath
element.getElementsByTagName('span')[0].innerText= songs[i].songName
})
// 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.remove('fa-circle-pause')
element.classList.add('fa-circle-play')
})
}
Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{
element.addEventListener('click',(e)=>{
songIndex = parseInt(e.target.id)
makeAllPlays()
// e.target.classList.remove('fa-circle-play')
// e.target.classList.add('fa-circle-pause')
songInfo.innerText = songs[songIndex].songName
audioElement.src = songs[songIndex].filePath
if (audioElement.paused || audioElement.currentTime<=0){
audioElement.play();
masterPlay.classList.remove('fa-circle-play');
masterPlay.classList.add("fa-circle-pause")
e.target.classList.remove('fa-circle-play')
e.target.classList.add('fa-circle-pause')
gif.style.opacity = 1
console.log(parseInt(audioElement.currentTime))
}
else{
audioElement.pause();
console.log("hii")
masterPlay.classList.remove('fa-circle-pause');
masterPlay.classList.add("fa-circle-play")
gif.style.opacity = 0
e.target.classList.remove('fa-circle-pause')
e.target.classList.add('fa-circle-play')
}
// audioElement.play()
// audioElement.currentTime=0
// masterPlay.classList.remove('fa-circle-play');
// masterPlay.classList.add("fa-circle-pause")
// gif.style.opacity = 1
})
})
// audioElement.play()
masterPlay.addEventListener("click",()=>{
if (audioElement.paused || audioElement.currentTime<=0){
audioElement.play();
masterPlay.classList.remove('fa-circle-play');
masterPlay.classList.add("fa-circle-pause")
songItemPlay = document.getElementById(songIndex)
songItemPlay.classList.remove('fa-circle-play');
songItemPlay.classList.add("fa-circle-pause")
gif.style.opacity = 1
}
else{
audioElement.pause();
masterPlay.classList.remove('fa-circle-pause');
masterPlay.classList.add("fa-circle-play")
gif.style.opacity = 0
songItemPlay = document.getElementById(songIndex)
songItemPlay.classList.remove('fa-circle-pause');
songItemPlay.classList.add("fa-circle-play")
}
})
document.getElementById('previous').addEventListener('click',()=>{
if(songIndex===0){
songIndex=0
}
else{
songItemPlay = document.getElementById(songIndex)
songItemPlay.classList.remove('fa-circle-pause');
songItemPlay.classList.add("fa-circle-play")
songIndex -=1
}
songItemPlay = document.getElementById(songIndex)
songItemPlay.classList.remove('fa-circle-play');
songItemPlay.classList.add("fa-circle-pause")
songInfo.innerText = songs[songIndex].songName
audioElement.src = songs[songIndex].filePath
audioElement.play()
audioElement.currentTime=0
})
document.getElementById('next').addEventListener('click',()=>{
if(songIndex>=6){
songIndex=0
}
else{
songItemPlay = document.getElementById(songIndex)
songItemPlay.classList.remove('fa-circle-pause');
songItemPlay.classList.add("fa-circle-play")
songIndex +=1
}
songItemPlay = document.getElementById(songIndex)
songItemPlay.classList.remove('fa-circle-play');
songItemPlay.classList.add("fa-circle-pause")
songInfo.innerText = songs[songIndex].songName
audioElement.src = songs[songIndex].filePath
audioElement.play()
audioElement.currentTime=0
})
The code to play music (under the if statement) is working , while the code(under the else statement) to pause music is not working. I think it is not working because audioElement.currentTime is always set to 0 . What's the solution ? please help me