Table of Contents
Responsive Music Player using HTML, CSS & JavaScript
Hello friends, my name is Gautam Prajapati and welcome to my blog post. Today we have created a beautiful music player using HTML CSS JavaScript for you which is fully responsive and you can use it in any device.
We have made the dashboard of this music player 3D like which looks amazing. We have put some images in the dashboard and all these are the images whose music can be played. Like if you press the next button given in the dashboard, then you will get the next song playing and along with that the image of that song will change and appear.
Music Player using HTML, CSS & JavaScript
Friends, if you have a little knowledge of HTML CSS and JavaScript, then you can use this project very easily because if you do not have knowledge of HTML CSS or JavaScript, then you will not be able to customize the images, buttons etc. used in the music dashboard according to your needs.
To use the code of this music player, you can use any code editor. First of all, create a folder in your code editor, in which you have to create three files of HTML CSS and JavaScript. After that, you have to keep inserting the code given below according to the file. Then if you open the code live and see, your music player will be ready.
But friends, you will not get the music that we have used in this player. For them, you can download the zip file from the full source code download button at the end of the post, in which you will get all the music and images.
Music Player Html Code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Music Player with Slider | Swiper JS By Developergtm</title><link rel="preload" as="image" imagesrcset="https://developergtm.in/wp-content/uploads/2024/09/Add-a-heading-3-768x432.png 768w, https://developergtm.in/wp-content/uploads/2024/09/Add-a-heading-3-300x169.png 300w, https://developergtm.in/wp-content/uploads/2024/09/Add-a-heading-3-1024x576.png 1024w, https://developergtm.in/wp-content/uploads/2024/09/Add-a-heading-3-150x84.png 150w, https://developergtm.in/wp-content/uploads/2024/09/Add-a-heading-3-450x253.png 450w, https://developergtm.in/wp-content/uploads/2024/09/Add-a-heading-3-1200x675.png 1200w, https://developergtm.in/wp-content/uploads/2024/09/Add-a-heading-3-600x338.png 600w, https://developergtm.in/wp-content/uploads/2024/09/Add-a-heading-3.png 1280w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergtm.in/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.1" type="font/woff2" crossorigin="anonymous" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<div class="album-cover">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- shree ram -->
<img decoding="async"
src="https://w0.peakpx.com/wallpaper/202/932/HD-wallpaper-shree-ram-sun-background-lord-ram-god.jpg" />
<div class="overlay">
<a href="https://www.youtube.com/watch?v=aatr_2MstrI&ab_channel=CleanBandit" target="_blank" rel="noopener"><ion-icon name="logo-youtube"></ion-icon
></a>
</div>
</div>
<div class="swiper-slide">
<!-- shree krishna image -->
<img decoding="async"
src="https://www.shyamparivar.com/uploads/gallery/best-shri-krishna-wallpaper-hd.jpg" />
</div>
<div class="swiper-slide">
<!-- shree ram image -->
<img decoding="async"
src="https://qph.cf2.quoracdn.net/main-qimg-2ff30e6942579741b39a9bfa4462285f" />
<div class="overlay">
<a href="https://www.youtube.com/watch?v=h5oHhGlWKf0&ab_channel=MuzikPlay" target="_blank" rel="noopener"><ion-icon name="logo-youtube"></ion-icon
></a>
</div>
</div>
<div class="swiper-slide">
<!-- hanuman ji image -->
<img decoding="async"
src="https://media.licdn.com/dms/image/D4D12AQHSMDOPb9YPhg/article-cover_image-shrink_720_1280/0/1684390609012?e=2147483647&v=beta&t=IBa97pBYsaCt7jk1A4xMjTu3vyj5XR0V4hSpTkLb2Ks" />
<div class="overlay">
<a href="https://www.youtube.com/watch?v=a5uQMwRMHcs&ab_channel=DaftPunkVEVO" target="_blank" rel="noopener"><ion-icon name="logo-youtube"></ion-icon
></a>
</div>
</div>
<div class="swiper-slide">
<!-- mahadev -->
<img decoding="async"
src="https://i.pinimg.com/736x/3f/61/d3/3f61d391f49a3996c1c323fb809f7a95.jpg" />
<div class="overlay">
<a href="https://www.youtube.com/watch?v=H5v3kku4y6Q&ab_channel=HarryStylesVEVO" target="_blank" rel="noopener"><ion-icon name="logo-youtube"></ion-icon
></a>
</div>
</div>
<div class="swiper-slide">
<!-- ganesh -->
<img decoding="async"
src="https://img10.hotstar.com/image/upload/f_auto/sources/r1/cms/prod/3275/1393275-i-03928152b533" />
<div class="overlay">
<a href="https://www.youtube.com/watch?v=9HDEHj2yzew&ab_channel=DuaLipa" target="_blank" rel="noopener"><ion-icon name="logo-youtube"></ion-icon
></a>
</div>
</div>
<div class="swiper-slide">
<!-- vishnu bhagwaan -->
<img decoding="async"
src="https://w0.peakpx.com/wallpaper/394/1015/HD-wallpaper-dhyan-me-lin-vishnu-bhagwan-vishnu-bhagwan-bhakti.jpg" />
<div class="overlay">
<a href="https://www.youtube.com/watch?v=tCXGJQYZ9JA&ab_channel=TaylorSwiftVEVO" target="_blank" rel="noopener"><ion-icon name="logo-youtube"></ion-icon
></a>
</div>
</div>
</div>
</div>
</div>
<div class="music-player">
<h1>Title</h1>
<p>Song Name</p>
<audio id="song">
<source src="song-list/Luke-Bergs-Gold.mp3" type="audio/mpeg" />
</audio>
<input type="range" value="0" id="progress" />
<div class="controls">
<button class="backward">
<i class="fa-solid fa-backward"></i>
</button>
<button class="play-pause-btn">
<i class="fa-solid fa-play" id="controlIcon"></i>
</button>
<button class="forward">
<i class="fa-solid fa-forward"></i>
</button>
</div>
</div>
</body>
<!-- partial -->
<script src='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js'></script>
<script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js'></script>
<script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js'></script><script src="./script.js"></script>
</body>
</html>
Music Player Css Code
/* © 2024. Developergtm All rights reserved. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600&display=swap");
:root {
--primary-clr: rgba(228, 228, 229, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
body {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
background: url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/8727c9b1-be21-4932-a221-4257b59a74dd);
background-repeat: no-repeat;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: slidein 120s forwards infinite alternate;
}
@keyframes slidein {
0%,
100% {
background-position: 20% 0%;
background-size: 3400px;
}
50% {
background-position: 100% 0%;
background-size: 2400px;
}
}
.album-cover {
width: 90%;
}
.swiper {
width: 100%;
padding: 40px 0 100px;
}
.swiper-slide {
position: relative;
max-width: 200px;
aspect-ratio: 1/1;
border-radius: 10px;
}
.swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: inherit;
-webkit-box-reflect: below -5px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
transform-origin: center;
transform: perspective(800px);
transition: 0.3s ease-out;
pointer-events: none;
user-select: none;
}
.swiper-slide-active .overlay {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
inset: 0;
width: 100%;
height: 98%;
background-color: rgba(28, 22, 37, 0.6);
border-radius: inherit;
opacity: 0;
transition: all 0.4s linear;
}
.swiper-slide:hover .overlay {
opacity: 1;
}
.swiper-slide .overlay ion-icon {
opacity: 0;
}
.swiper-slide-active:hover .overlay ion-icon {
font-size: 4rem;
color: #eb0b0b;
opacity: 1;
cursor: pointer;
}
/* Music Player */
.music-player {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--primary-clr);
width: 380px;
padding: 10px 30px;
border-radius: 20px;
}
.music-player h1 {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.6;
}
.music-player p {
font-size: 1rem;
font-weight: 400;
opacity: 0.6;
}
/* Music Player Progress */
#progress {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 7px;
background: rgba(163, 162, 164, 0.4);
border-radius: 4px;
margin: 32px 0 24px;
cursor: pointer;
}
#progress::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background: rgba(163, 162, 164, 0.9);
width: 16px;
aspect-ratio: 1/1;
border-radius: 50%;
outline: 4px solid var(--primary-clr);
box-shadow: 0 6px 10px rgba(5, 36, 28, 0.3);
}
/* Music Player Controls */
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.controls button {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
aspect-ratio: 1/1;
margin: 20px;
background: rgba(163, 162, 164, 0.3);
color: var(--primary-clr);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
outline: 0;
font-size: 1.1rem;
box-shadow: 0 10px 20px rgba(5, 36, 28, 0.3);
cursor: pointer;
transition: all 0.3s linear;
}
.controls button:is(:hover, :focus-visible) {
transform: scale(0.96);
}
.controls button:nth-child(2) {
transform: scale(1.3);
}
.controls button:nth-child(2):is(:hover, :focus-visible) {
transform: scale(1.25);
}
/* © 2024. Developergtm All rights reserved. */
Music Player Javascript Code
// © 2024. Developergtm All rights reserved.
const progress = document.getElementById("progress");
const song = document.getElementById("song");
const controlIcon = document.getElementById("controlIcon");
const playPauseButton = document.querySelector(".play-pause-btn");
const forwardButton = document.querySelector(".controls button.forward");
const backwardButton = document.querySelector(".controls button.backward");
const songName = document.querySelector(".music-player h1");
const artistName = document.querySelector(".music-player p");
const songs = [
{
title: "Ram Aayenge 🚩",
name: "Ram Aayenge 🚩By Goutam Prajapat",
source:
"Ram Aayenge.m4a",
},
{
title: "ADHARAM MADHURAM",
name: "ADHARAM MADHURAM By Goutam Prajapat",
source:
"ADHARAM MADHURAM.m4a",
},
{
title: "Ram Aayenge 🚩",
name: "Ram Aayenge 🚩By Goutam Prajapat",
source:
"Ram Aayenge.m4a",
},
{
title: "Keejo Kesari Ke Laal",
name: "Keejo Kesari Ke Laal By Goutam Prajapat",
source:
"Keejo Kesari Ke Laal.m4a",
},
{
title: "Shiv Tandav Stotram",
name: "Shiv Tandav Stotram By Goutam Prajapat",
source:
"Shiv Tandav Stotram.m4a",
},
{
title: "ganpati bappa morya 🙏🙏🚩🚩❤️❤️❤️❤️",
name: "ganpati bappa morya 🙏🚩❤️ by Goutam Prajapat",
source:
"ganpati bappa morya.m4a",
},
{
title: "Shakti Hai Bhakti Hai",
name: "Shakti Hai Bhakti Hai By Goutam Prajapat",
source:
"Shakti Hai Bhakti Hai.m4a",
},
];
let currentSongIndex = 3;
function updateSongInfo() {
songName.textContent = songs[currentSongIndex].title;
artistName.textContent = songs[currentSongIndex].name;
song.src = songs[currentSongIndex].source;
song.addEventListener("loadeddata", function () {});
}
song.addEventListener("timeupdate", function () {
if (!song.paused) {
progress.value = song.currentTime;
}
});
song.addEventListener("loadedmetadata", function () {
progress.max = song.duration;
progress.value = song.currentTime;
});
function pauseSong() {
song.pause();
controlIcon.classList.remove("fa-pause");
controlIcon.classList.add("fa-play");
}
function playSong() {
song.play();
controlIcon.classList.add("fa-pause");
controlIcon.classList.remove("fa-play");
}
function playPause() {
if (song.paused) {
playSong();
} else {
pauseSong();
}
}
playPauseButton.addEventListener("click", playPause);
progress.addEventListener("input", function () {
song.currentTime = progress.value;
});
progress.addEventListener("change", function () {
playSong();
});
forwardButton.addEventListener("click", function () {
currentSongIndex = (currentSongIndex + 1) % songs.length;
updateSongInfo();
playPause();
});
backwardButton.addEventListener("click", function () {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
updateSongInfo();
playPause();
});
updateSongInfo();
var swiper = new Swiper(".swiper", {
effect: "coverflow",
centeredSlides: true,
initialSlide: 3,
slidesPerView: "auto",
allowTouchMove: false,
spaceBetween: 40,
coverflowEffect: {
rotate: 25,
stretch: 0,
depth: 50,
modifier: 1,
slideShadows: false,
},
navigation: {
nextEl: ".forward",
prevEl: ".backward",
},
});
// © 2024. Developergtm All rights reserved.