Create A Music Player in HTML,CSS, and JavaScript Complete Source Code
.png)
Hey friends, today in this blog you’ll learn how to Create a Custom Player in JavaScript. We’ll use HTML CSS & Pure JavaScript to create this awesome music player. It’s time to create a beautiful music player in JavaScript.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Music Player | pravarti-tech</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/
thumb/9/93/Aqualung_music_player_drop_icon.svg/768px-Aqualung_music_player
_drop_icon.svg.png" type="image/x-icon">
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/
all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD
9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;
600&family=Roboto+Mono&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="music-player">
<button id="playlist">
<i class="fa-solid fa-angle-down"></i>
</button>
<img id="song-image" src="make-me-move.jpg" />
<div class="song-details">
<p id="song-name">Make Me Move</p>
<p id="song-artist">Culture Code</p>
</div>
<div class="player-options">
<button id="shuffle">
<i class="fa-solid fa-shuffle"></i>
</button>
<button id="prev">
<i class="fa-solid fa-backward-step"></i>
</button>
<button id="play">
<i class="fa-solid fa-play"></i>
</button>
<button id="pause" class="hide">
<i class="fa-solid fa-pause"></i>
</button>
<button id="next">
<i class="fa-solid fa-forward-step"></i>
</button>
<button id="repeat">
<i class="fa-solid fa-repeat"></i>
</button>
</div>
<audio id="audio" preload="metadata"></audio>
<div id="progress-bar">
<div id="current-progress"></div>
</div>
<div class="time-container">
<span id="current-time">0:00</span>
<span id="max-duration">0:00</span>
</div>
<div id="playlist-container" class="hide">
<button id="close-button">
<i class="fa-solid fa-xmark"></i>
</button>
<ul id="playlist-songs"></ul>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: url(https://img.freepik.com/premium-photo/musical-headphones-colored-blue-pink-background_90380-624.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
.music-player {
font-size: 16px;
width: 80vw;
max-width: 25em;
background-color: #ffffff80;
padding: 3em 1.8em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.5em;
box-shadow: 0 1.2rem 3rem 0.5rem rgba(0, 0,0,.2);
}
img {
width: 16rem;
height: 16rem;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 1.2rem 3rem 0.5rem rgba(0,0,0,0.4);
margin-left: 2.5rem;
margin-top: 1.25em;
}
#playlist {
float: right;
}
.song-details {
font-family: "Poppins", sans-serif;
text-align: center;
}
.song-details #song-name {
font-size: 1.3em;
font-weight: 600;
letter-spacing: 0.3px;
}
.song-details #song-artist {
font-size: 0.8em;
}
.player-options {
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 1.25em;
margin: 1.25em 0 0.6em 0;
}
.music-player button {
border: none;
background-color: transparent;
}
#play,
#pause {
height: 2.5em;
width: 2.5em;
font-size: 1.8em;
background-color: #2887e3;
color: #ffffff;
border-radius: 50%;
}
#prev,
#next {
color: #16191e;
font-size: 1.4em;
}
#shuffle,
#repeat {
color: #949494;
font-size: 1em;
}
.hide {
display: none;
}
.anime{
animation: rotate 7s linear infinite;
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
#progress-bar {
position: relative;
width: 100%;
height: 0.3em;
background-color: #eeeeee;
margin: 1em 0;
border-radius: 0.18em;
cursor: pointer;
}
#current-progress {
position: absolute;
left: 0;
top: 0;
display: inline-block;
height: 100%;
width: 20%;
background-color: #2887e3;
border-radius: 0.18em;
}
.time-container {
display: flex;
align-items: center;
justify-content: space-between;
font-family: "Roboto Mono", monospace;
}
#playlist-container {
background-color: #ffffff;
position: absolute;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.6em;
padding: 2em 1em;
font-family: "Poppins", sans-serif;
}
#close-button {
background-color: transparent;
border: none;
height: 2em;
width: 2em;
cursor: pointer;
margin-left: 90%;
}
ul {
list-style-type: none;
}
li {
display: flex;
align-items: center;
margin: 1em 0;
cursor: pointer;
}
.playlist-song-details {
margin-left: 1em;
}
.playlist-song-details > span {
display: block;
}
#playlist-song-artist-album {
color: #949494;
font-size: 0.8em;
}
button.active i {
color: #2887e3;
}
@media screen and (max-width: 450px) {
.music-player {
font-size: 14px;
}
img#song-image {
margin: auto;
}
}
.playlist-image-container {
width: 3em;
}
Third, create a JavaScript file with the name of music-list.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension. In this JavaScript file, we store all music details using the array.
const img = document.querySelector('img');
const prevButton = document.getElementById("prev");
const nextButton = document.getElementById("next");
const repeatButton = document.getElementById("repeat");
const shuffleButton = document.getElementById("shuffle");
const audio = document.getElementById("audio");
const songImage = document.getElementById("song-image");
const songName = document.getElementById("song-name");
const songArtist = document.getElementById("song-artist");
const pauseButton = document.getElementById("pause");
const playButton = document.getElementById("play");
const playlistButton = document.getElementById("playlist");
const maxDuration = document.getElementById("max-duration");
const currentTimeRef = document.getElementById("current-time");
const progressBar = document.getElementById("progress-bar");
const playlistContainer = document.getElementById("playlist-container");
const closeButton = document.getElementById("close-button");
const playlistSongs = document.getElementById("playlist-songs");
const currentProgress = document.getElementById("current-progress");
//index for songs
let index;
//initially loop=true
let loop = true;
const songsList = [
{
name: "Ram Siya Ram",
link: "music/m1.mp3",
artist: "Sachet & Parampara Tandon",
image: "image/i1.jpg",
},
{
name: "Tere Vaaste",
link: "music/m2.mp3",
artist: "Varun Jain",
image: "image/i2.jpg",
},
{
name: "Phir Aur Kya Chahiye",
link: "music/m3.mp3",
artist: "Arijit Singh",
image: "image/i3.jpg",
},
{
name: "Zihaal-E-Miskin",
link: "music/m4.mp3",
artist: "Vishal Mishra,Shreya Ghoshal",
image: "image/i4.jpg",
},
{
name: "Bumpy Ride",
link: "music/m5.mp3",
artist: "Mohombi MoveMeant",
image: "image/i5.jpg",
},
];
//events object
let events = {
mouse: {
click: "click",
},
touch: {
click: "touchstart",
},
};
let deviceType = "";
//Detect touch device
const isTouchDevice = () => {
try {
//We try to create TouchEvent(it would fail for desktops and throw error)
document.createEvent("TouchEvent");
deviceType = "touch";
return true;
} catch (e) {
deviceType = "mouse";
return false;
}
};
//Format time (convert ms to seconds, minutes and add 0 id less than 10)
const timeFormatter = (timeInput) => {
let minute = Math.floor(timeInput / 60);
minute = minute < 10 ? "0" + minute : minute;
let second = Math.floor(timeInput % 60);
second = second < 10 ? "0" + second : second;
return `${minute}:${second}`;
};
//set song
const setSong = (arrayIndex) => {
//this extracts all the variables from the object
let { name, link, artist, image } = songsList[arrayIndex];
audio.src = link;
songName.innerHTML = name;
songArtist.innerHTML = artist;
songImage.src = image;
//display duration when metadata loads
audio.onloadedmetadata = () => {
maxDuration.innerText = timeFormatter(audio.duration);
};
};
//play song
const playAudio = () => {
audio.play();
pauseButton.classList.remove("hide");
playButton.classList.add("hide");
img.classList.add('anime');
};
//repeat button
repeatButton.addEventListener("click", () => {
if (repeatButton.classList.contains("active")) {
repeatButton.classList.remove("active");
audio.loop = false;
console.log("repeat off");
} else {
repeatButton.classList.add("active");
audio.loop = true;
console.log("repeat on");
}
});
//Next song
const nextSong = () => {
//if loop is true then continue in normal order
if (loop) {
if (index == songsList.length - 1) {
//If last song is being played
index = 0;
} else {
index += 1;
}
setSong(index);
playAudio();
} else {
//else find a random index and play that song
let randIndex = Math.floor(Math.random() * songsList.length);
console.log(randIndex);
setSong(randIndex);
playAudio();
}
};
//pause song
const pauseAudio = () => {
audio.pause();
pauseButton.classList.add("hide");
playButton.classList.remove("hide");
img.classList.remove('anime');
};
//previous song ( you can't go back to a randomly played song)
const previousSong = () => {
if (index > 0) {
pauseAudio();
index -= 1;
} else {
//if first song is being played
index = songsList.length - 1;
}
setSong(index);
playAudio();
};
//next song when current song ends
audio.onended = () => {
nextSong();
};
//Shuffle songs
shuffleButton.addEventListener("click", () => {
if (shuffleButton.classList.contains("active")) {
shuffleButton.classList.remove("active");
loop = true;
console.log("shuffle off");
} else {
shuffleButton.classList.add("active");
loop = false;
console.log("shuffle on");
}
});
//play button
playButton.addEventListener("click", playAudio);
//next button
nextButton.addEventListener("click", nextSong);
//pause button
pauseButton.addEventListener("click", pauseAudio);
//prev button
prevButton.addEventListener("click", previousSong);
//if user clicks on progress bar
isTouchDevice();
progressBar.addEventListener(events[deviceType].click, (event) => {
//start of progressBar
let coordStart = progressBar.getBoundingClientRect().left;
//mouse click position
let coordEnd = !isTouchDevice() ? event.clientX : event.touches[0].clientX;
let progress = (coordEnd - coordStart) / progressBar.offsetWidth;
//set width to progress
currentProgress.style.width = progress * 100 + "%";
//set time
audio.currentTime = progress * audio.duration;
//play
audio.play();
pauseButton.classList.remove("hide");
playButton.classList.add("hide");
});
//update progress every second
setInterval(() => {
currentTimeRef.innerHTML = timeFormatter(audio.currentTime);
currentProgress.style.width =
(audio.currentTime / audio.duration.toFixed(3)) * 100 + "%";
});
//update time
audio.addEventListener("timeupdate", () => {
currentTimeRef.innerText = timeFormatter(audio.currentTime);
});
//Creates playlist
const initializePlaylist = () => {
for (let i in songsList) {
playlistSongs.innerHTML += `<li class='playlistSong' onclick='setSong(${i})'>
<div class="playlist-image-container">
<img src="${songsList[i].image}"/>
</div>
<div class="playlist-song-details">
<span id="playlist-song-name">
${songsList[i].name}
</span>
<span id="playlist-song-artist-album">
${songsList[i].artist}
</span>
</div>
</li>`;
}
};
//display playlist
playlistButton.addEventListener("click", () => {
playlistContainer.classList.remove("hide");
});
//hide playlist
closeButton.addEventListener("click", () => {
playlistContainer.classList.add("hide");
});
window.onload = () => {
//initially first song
index = 0;
setSong(index);
//create playlist
initializePlaylist();
};
That’s all, now you’ve successfully created a Custom Music Player in JavaScript. If your code doesn’t work or you’ve faced any error/problem, please contact me.
.png)
.png "Diwali Fire Crackers Using HTML , CSS , and Js")
.png "Music Player using JavaScript")
.png)
.png&description= Music Player using JavaScript){kind=link}
0 Comments