In this article, I will show you how to create a music player using only simple HTML, CSS, and JavaScript programming code. It is very important for every web designer to learn how to make a music player.
This is a simple lesson on web design. I will show you step by step how it is possible to make a music player using programming code. I used CSS and JavaScript programming code to make it and also a small amount of HTML code. I have written the necessary code to make it as simple as possible. So that programmers of all these levels can understand and learn it.
Some information about this music player
⏩ This music player is completely professional and responsive. You can use a simple programming code to make it.
⏩ Like a normal music player, this player has all the features. This music player has everything like changing songs, turning off songs, playing songs, etc.
⏩ There is also a large screen here. Where pictures of the song are shown. There you will save the picture of the song in advance.
⏩ Then when you play the song the image will continue to show along with the song. The image will now change when you change the song.
⏩ In this case, I have added four songs. You can add as many songs as you like.
Hope you like this music player design and you want to learn how to make it. To make it, you add three types of programming code to your project. Below I have given those three programming codes and shown you how to add these codes to your project.
I have shown step by step below which codes have been used for which purpose. You can add any of your own projects by copying the following codes. First of all, you create an HTML and a CSS file. Attach the CSS file to the HTML. Then add the following three types of code to that project.
Add HTML code to create the player structure
The following programming codes are HTML programming codes. Which I have used very little here. Only to make the structure of the song's file and music player. You copy the codes below then paste these codes into the body tags of your project.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<div class="bg-container">
<img src="" alt="" id="background"><!-- /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/-->
</div>
<div class="player-container">
<!-- Song -->
<div class="img-container">
<img src="" alt="" id="cover" class="active">
</div>
<h2 id="title"></h2>
<h3 id="artist"></h3>
<audio src=""></audio>
<!-- Progress --><!-- /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/-->
<div class="progress-container" id="progress-container">
<div class="progress" id="progress"></div>
<div class="duration-wrapper">
<span id="current-time"></span>
<span id="duration"></span>
</div>
</div>
<!-- Controls -->
<div class="player-controls">
<i class="fas fa-backward" id="prev" title="Previous"></i>
<i class="fas fa-play main-button" id="play" title="Play"></i>
<i class="fas fa-forward" id="next" title="Next"></i>
</div>
</div><!-- /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/-->
Add CSS code to make the music player professional
The following codes are CSS programming codes. This code is the most I have used to make this music player. With this code, we have made it completely responsive, stylish, and professional. You copy the following codes then paste them into your CSS file.
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
html {
box-sizing: border-box;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
body {
margin: 0;
min-height: 100vh;
background: #c9ced3;
display: flex;
justify-content: center;
align-items: center;
font-family: Nunito, sans-serif;
font-size: 12px;
}
.bg-container {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
z-index: -1;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
.bg-container img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
filter: blur(15px);
-webkit-filter: blur(50px);
transform: scale(1.1);
}
.player-container {
height: 500px;
width: 400px;
background: #e7e7e7;
border-radius: 20px; /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);
}
.img-container {
width: 300px;
height: 300px;
position: relative;
top: -50px;
left: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.img-container img {
height: 0;
width: 0; /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
opacity: 0;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.5);
transition: .5s;
}
.img-container img.active {
transition: .5s;
opacity: 1;
width: 100%;
height: 100%;
}
h2 {
font-size: 25px;
text-align: center; /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
margin: 0;
}
h3 {
font-size: 20px;
text-align: center;
font-weight: 400;
margin: 5px 0 0;
}
/* Progress */
.progress-container {
background: #fff;
border-radius: 5px;
cursor: pointer;
margin: 40px 20px;
height: 4px;
width: 90%;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
.progress {
background: #242323;
border-radius: 5px;
height: 100%;
width: 0%;
transition: width 0.1s linear;
}
.duration-wrapper {
position: relative;
top: -25px;
display: flex;
justify-content: space-between;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
/* Controls */
.player-controls {
position: relative;
top: -15px;
left: 120px;
width: 200px;
}
.fas {
font-size: 30px;
color: rgb(129, 129, 129);
margin-right: 30px;
cursor: pointer;
user-select: none;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
.fas:hover {
filter: brightness(80%);
}
.main-button {
font-size: 40px;
position: relative;
top: 3px;
}
/* Media Query: iPhone (Vertical) */
@media screen and (max-width: 376px) {
.player-container {
width: 95vw;
}
.img-container {
left: 29px;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
h2 {
font-size: 20px;
}
h3 {
font-size: 15px;
}
.player-controls {
top: -10px;
left: 100px;
}
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
Add JavaScript code to complete this player
The following programming codes are JavaScript programming codes. Which basically made this music player professional and animated. Here I have used a lot of JavaScript programming code. You can copy the following programming codes. Then paste your HTML file in between.
const image = document.querySelector('#cover');
const title = document.getElementById('title');
const artist = document.getElementById('artist');
const music = document.querySelector('audio');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress-container');
const prevBtn = document.getElementById('prev');
const playBtn = document.getElementById('play');
const nextBtn = document.getElementById('next'); /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
const background = document.getElementById("background");
// Music
const songs = [
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/1.mp3',
displayName: 'Yıldız Tozu',
artist: 'Ozbi',
cover: "https://images.genius.com/ee202c6f724ffd4cf61bd01a205eeb47.1000x1000x1.jpg",
},
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/2.mp3',
displayName: 'You\'re Somebody Else',
artist: 'flora cash',
cover: "https://pbs.twimg.com/media/D2NZH-2U4AAL9Xs.jpg",
},
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/3.mp3',
displayName: 'Powerless', /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
artist: 'Linkin Park',
cover: "https://images.genius.com/c5a58cdaab9f3199214f0e3c26abbd0e.1000x1000x1.jpg",
},
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/4.mp3',
displayName: 'Seni Dert Etmeler',
artist: 'Madrigal',
cover: "https://www.radyomega.fm/wp-content/uploads/2020/04/MADRIGAL-600.jpg",
},
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/5.mp3',
displayName: 'Ederlezi',
artist: 'Solomun', /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
cover: "https://m.media-amazon.com/images/I/616t0841uvL._SS500_.jpg",
},
];
// Check if Playing
let isPlaying = false;
// Play
function playSong() {
isPlaying = true;
playBtn.classList.replace('fa-play', 'fa-pause');
playBtn.setAttribute('title', 'Pause');
music.play();
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
// Pause
function pauseSong() {
isPlaying = false;
playBtn.classList.replace('fa-pause', 'fa-play');
playBtn.setAttribute('title', 'Play');
music.pause();
}
// Play or Pause Event Listener
playBtn.addEventListener('click', () => (isPlaying ? pauseSong() : playSong()));
// Update DOM
function loadSong(song) {
title.textContent = song.displayName;
artist.textContent = song.artist;
music.src = song.path; /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
changeCover(song.cover);
}
function changeCover(cover) {
image.classList.remove('active');
setTimeout(() => {
image.src = cover;
image.classList.add('active');
}, 100)
background.src = cover;
}
// Current Song
let songIndex = 0;
// Previous Song /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
function prevSong() {
songIndex--;
if (songIndex < 0) {
songIndex = songs.length - 1;
}
loadSong(songs[songIndex]);
playSong();
}
// Next Song
function nextSong() {
songIndex++;
if (songIndex > songs.length - 1) {
songIndex = 0;
} /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
loadSong(songs[songIndex]);
playSong();
}
// On Load - Select First Song
loadSong(songs[songIndex]);
// Update Progress Bar & Time
function updateProgressBar(e) {
if (isPlaying) {
const { duration, currentTime } = e.srcElement;
// Update progress bar width
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
// Calculate display for duration
const durationMinutes = Math.floor(duration / 60); /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
let durationSeconds = Math.floor(duration % 60);
if (durationSeconds < 10) {
durationSeconds = `0${durationSeconds}`;
}
// Delay switching duration Element to avoid NaN
if (durationSeconds) {
durationEl.textContent = `${durationMinutes}:${durationSeconds}`;
}
// Calculate display for currentTime /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
const currentMinutes = Math.floor(currentTime / 60);
let currentSeconds = Math.floor(currentTime % 60);
if (currentSeconds < 10) {
currentSeconds = `0${currentSeconds}`;
}
currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`;
} /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
}
// Set Progress Bar
function setProgressBar(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const { duration } = music;
music.currentTime = (clickX / width) * duration;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
// Event Listeners
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
music.addEventListener('ended', nextSong);
music.addEventListener('timeupdate', updateProgressBar);
progressContainer.addEventListener('click', setProgressBar);
I hope you have been able to make the music player completely from the above article. And learned how it was made.
❤Sharing is caring❤
![Make Racing Car Game [Using JavaScript Code Only]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrVmbtoZxLonUlDyWpFe9gEe9Z1b2zrrfm4i5dwOqw2YQ41SElTjXTvhWSxHTwMQBmWmFMoKTSxUtGc3hAjOh6T-8jMXBlvbXOnaGHq8RP74rRlg4mPR4EuER3Yhb5My-reWpoARLnS8/w680/Make+Racing+Car+Game+%255BUsing+JavaScript+Code+Only%255D.jpg)
How to put my own music file from my google drive into the script above. I tried using the link given by google drive but it doesn't play my mp3 audio file.
ReplyDeleteIn this case, the mp3 uploaded to Google Drive does not work. You can upload to linkedin or github and then use. You can also use any mp3 from your device. For that you add the rename (rename.mp3 or rename.wev) of that mp3 in place of the link.
DeleteOf course in this case you have to put your programming code (heml,css,js, etc) and mp3 in the same folder.
Hey, thank you for this.
ReplyDeleteIf you could help me, I'd like to remove the large background so that I just have the player itself.
How can I go about doing this?
For that removed ".bg-container img" style code from CSS code
Delete