Responsive Music Player Using HTML , CSS & JS With Source Code
Introduction :
Hello friends, welcome to all of you in this new project, today we have created a great music player in which you can play and listen to music and the special thing about this music player is that it is completely responsive and it can do many things. does
In this music player, we have used pure JavaScript and also we have added two buttons in this music player, one button works to next music and the other button works to previous music and both of them. The buttons work perfectly and you can pause and play the music.
How to Use Music Player Code:-
Friends, to use the code of this music player, you have to take care of some small things, if you do not take care of those things then you may face difficulty in making the music player live, so let’s go step by step. know those things.
- First of all, you will have to create a folder in your computer or laptop, which you can name as per your choice, then open this folder in the code editor you use.
- I know you must have opened the folder in the code editor, so now you will have to create three files in that folder, which are as follows: 👇👇
- First of all, we have to create the structure of the music player, for which we have to create a file inside the folder with the name of index.html, then we will need to style it to make the music player look good, so you will have to create a second file. The file has to be created with the name of style.css.
- Now you must have created both the files but the important file will also have to be created whose name will be script.js. If you do not create this file then your music player will not work.
Now how to use the code of music player, then you have to follow these steps. 👇👇
- You will find three boxes in this post of mine which will contain HTML code and two more, one is CSS and the other is JavaScript, I have highlighted the codes of these three.
- You will get the name of the file in the heading of the code, from which you will know which HTML code it is, from that you have to simply copy the code and then you have to go to the file in your folder and upload it.
HTML (index.html)
<title>Developergtm - Music Web App</title>
<div class="player">
<div class="header">
Music <span>Player</span>
</div>
<div class="img">
<img decoding="async" src="" id="thumb">
</div>
<div class="details">
<h3 id="title"></h3>
<p id="musician"></p>
</div>
<audio id="song">
</audio>
<div class="time">
<span id="start">2:28</span>
<span id="end">4:33</span>
</div>
<div class="action">
<button>
<i class="bx bx-skip-previous"></i>
</button>
<button class="play" id="play">
<i class="bx bx-play"></i>
</button>
<button>
<i class="bx bx-skip-next"></i>
</button>
</div>
CSS (Style.css)
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,500;0,600;1,400;1,600&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Josefin Sans", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: linear-gradient(176deg, #35255a, #3a7a78);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.player {
width: 90%;
max-width: 300px;
height: 430px;
overflow: hidden;
border-radius: 30px;
padding: 20px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
position: relative;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
.header {
text-align: center;
margin: 0px auto;
padding: 5px;
font-size: 20px;
font-weight: bold;
color: #fff;
font-family: sans-serif;
border: 1px solid mediumvioletred;
border-radius: 50px;
}
.header span {
color: #ff688f;
}
.img {
width: 160px;
height: 160px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto;
border-radius: 50%;
background-color: black;
overflow: hidden;
margin-top: 15px;
}
.img img {
width: 150px;
height: 150px;
display: block;
margin: 20px auto;
border-radius: 50%;
object-fit: cover;
z-index: 9999;
}
.img img.play {
animation: 15s rotate linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.details {
text-align: center;
}
.details p {
color: aliceblue;
font-size: 15px;
margin-top: 5px;
}
.action {
position: relative;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
}
.action button {
background: black;
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.028);
border-radius: 50%;
padding: 10px;
font-size: 28px;
width: 60px;
height: 60px;
border: none;
outline: none;
margin: 10px;
border: 2px solid #f8f8f8;
cursor: pointer;
color: #ddd;
display: flex;
justify-content: center;
align-items: center;
}
.action button.play {
background: border-box;
color: #fff;
}
.time {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px auto 10px auto;
width: 90%;
color: aliceblue;
}
#progress {
margin: 0px auto;
display: block;
width: 90%;
-webkit-appearance: none;
height: 6px;
background: #f7f7f7;
}
#progress::-webkit-slider-thumb {
background: red;
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 3px;
background: linear-gradient(135deg, #ffa17f, #ff688f);
transition: 0.2s ease-in-out;
}
Javascript (Script.js)
const songs = [
{
name: "Kudmayi",
link: "https://paglasongs.com/files/download/id/14933",
artists: "Shahid Mallya",
image: "https://raw.githubusercontent.com/developergtm24/music-web/main/image%20musuic.jpg"
},
{
name: "Tum Se",
link: "https://pagalsongs.com.in/siteuploads/files/sfd3/1494/Tum%20Se-(PagalSongs.Com.IN).mp3",
artists: "Sachin-Jigar",
image: "https://raw.githubusercontent.com/developergtm24/music-web/main/image%20musuic.jpg"
},
];
var progress = document.querySelector("#progress");
var song = document.querySelector("#song");
var playBtn = document.querySelector("#play i");
var index = 0;
var img = document.querySelector(".img img");
var title = document.querySelector("#title");
var thumb = document.querySelector("#thumb");
var artist = document.querySelector("#musician");
var start = document.querySelector("#start");
var end = document.querySelector("#end");
song.src = songs[index].link;
title.innerHTML = songs[index].name;
artist.innerHTML = songs[index].artists;
thumb.src = songs[index].image;
song.onloadedmetadata = function () {
progress.max = song.duration;
progress.value = song.currentTime;
setInterval(() => {
var min = Math.floor(song.duration / 60);
var sec = Math.floor(song.duration % 60);
var curMin = Math.floor(song.currentTime / 60);
var curSec = Math.floor(song.currentTime % 60);
if (sec < 10) {
sec = "0" + sec;
}
if (curSec < 10) {
curSec = "0" + curSec;
}
if (min < 10) {
min = "0" + min;
}
if (curMin {
progress.value = song.currentTime;
if (song.currentTime == song.duration) {
nextPlay();
}
}, 1000);
}
progress.onchange = function () {
song.play();
song.currentTime = progress.value;
playBtn.classList.remove("bx-play");
playBtn.classList.add("bx-pause");
img.classList.add("play");
};
function nextPlay() {
index = index + 1;
if (index > songs.length) {
index = 0;
song.src = songs[index].link;
title.innerHTML = songs[index].name;
artist.innerHTML = songs[index].artists;
thumb.src = songs[index].image;
song.play();
} else {
song.src = songs[index].link;
title.innerHTML = songs[index].name;
artist.innerHTML = songs[index].artists;
thumb.src = songs[index].image;
song.play();
}
}
function prevPlay() {
index = index - 1;
if (index < 0) {
index = songs.length;
song.src = songs[index].link;
title.innerHTML = songs[index].name;
artist.innerHTML = songs[index].artists;
thumb.src = songs[index].image;
song.play();
} else {
song.src = songs[index].link;
title.innerHTML = songs[index].name;
artist.innerHTML = songs[index].artists;
thumb.src = songs[index].image;
song.play();
}
}
Build a Quiz Game Using HTML CSS and JavaScript Introduction Hello coders, you might have played various games, but were you aware …
Emoji Catcher Game Using HTML CSS and JavaScript Introduction Hello Coders, Welcome to another new blog. In this article we’ve made a …
Typing Challenge Using HTML CSS and JavaScript Introduction Hello friends, all you developer friends are welcome to our new project. If you …
Breakout Game Using HTML CSS and JavaScript With Source Code Introduction Hello friends, welcome to today’s new blog post. All of you …
Get Huge Discounts
More Python Projects
