Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<div class="player">
<img src="cover.jpg" class="cover">
<h2 id="title">Music Title</h2>
<p id="artist">Artist Name</p>
<audio id="audio">
<source src="music.mp3" type="audio/mpeg">
</audio>
<input type="range"
id="progress"
value="0"
min="0"
max="100">
<div class="time">
<span id="current">0:00</span>
<span id="duration">0:00</span>
</div>
<div class="controls">
<button id="back">
<i class="fas fa-backward"></i>
</button>
<button id="play">
<i class="fas fa-play"></i>
</button>
<button id="next">
<i class="fas fa-forward"></i>
</button>
</div>
<div class="volume">
<i class="fas fa-volume-up"></i>
<input type="range"
id="volume"
min="0"
max="1"
step="0.1"
value="1">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Style.css File
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}
body{
background:#1d1d1d;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.player{
width:350px;
background:#2f2f2f;
padding:25px;
border-radius:20px;
text-align:center;
color:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.cover{
width:250px;
height:250px;
border-radius:15px;
object-fit:cover;
margin-bottom:20px;
}
h2{
margin-bottom:5px;
}
p{
color:#ccc;
margin-bottom:20px;
}
#progress{
width:100%;
cursor:pointer;
}
.time{
display:flex;
justify-content:space-between;
margin:10px 0;
}
.controls{
display:flex;
justify-content:center;
gap:20px;
margin:20px 0;
}
.controls button{
width:60px;
height:60px;
border:none;
border-radius:50%;
background:#ff3d57;
color:#fff;
font-size:22px;
cursor:pointer;
transition:.3s;
}
.controls button:hover{
transform:scale(1.1);
}
.volume{
display:flex;
align-items:center;
gap:10px;
}
.volume input{
width:100%;
}
</style>
Javascript File
<script>
const audio=document.getElementById("audio");
const play=document.getElementById("play");
const progress=document.getElementById("progress");
const current=document.getElementById("current");
const duration=document.getElementById("duration");
const volume=document.getElementById("volume");
let playing=false;
// Play Pause
play.onclick=function(){
if(playing){
audio.pause();
play.innerHTML='<i class="fas fa-play"></i>';
playing=false;
}
else{
audio.play();
play.innerHTML='<i class="fas fa-pause"></i>';
playing=true;
}
}
// Duration
audio.onloadedmetadata=function(){
progress.max=Math.floor(audio.duration);
duration.innerHTML=format(audio.duration);
}
// Update Progress
audio.ontimeupdate=function(){
progress.value=Math.floor(audio.currentTime);
current.innerHTML=format(audio.currentTime);
}
// Change Position
progress.oninput=function(){
audio.currentTime=progress.value;
}
// Volume
volume.oninput=function(){
audio.volume=volume.value;
}
// Song Finished
audio.onended=function(){
play.innerHTML='<i class="fas fa-play"></i>';
playing=false;
}
// Format Time
function format(time){
let min=Math.floor(time/60);
let sec=Math.floor(time%60);
if(sec<10) sec="0"+sec;
return min+":"+sec;
}
</script>