ADVERTISEMENT

Music Player Using HTML CSS & Javascript

Telegram Group Join Now

ADVERTISEMENT

Create Music Player Project Using Javascript (Source Code)

 
music player html css
 
Welcome to the blog for codewithrandom. With the aid of HTML, CSS, and JavaScript code, we develop a music player. We create a full-featured music player system with buttons for play, pause, advance, and back. We discover how to make an HTML music player. 
Code by N/A
Project Download Link Available Below
Language used HTML, CSS, and JavaScript
External link / Dependencies No
Responsive YES
Music Player  Table
 
 A music player is a tool that is used to play audio music in formats like MP3, WAV, etc. When listening to songs, music player is useful. We regularly listen to music on a music player. Spotify, Google Music, and other popular music streaming services are some examples of music players.
 
We use html & css and javascript for this music player html. Hope you enjoy our blog so let’s start with a basic html structure for a music player html.
 
Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

 

ADVERTISEMENT

ADVERTISEMENT

We all know that managing a code is important while building a project so that it will be easy for the user to use that code in future as well . So we will follow the same method we will be creating the different file for creating our project.

  1. index.html -defines the element structure that would be displayed on the page through the HTML layout.
  2. style.css- includes styling CSS code. We may style the various parts with CSS to improve the visual appeal.
  3. Index.js – includes JavaScript programming. For the player to perform all of its functions, a number of functions must cooperate. For instance, the ability to play, pause, switch between songs, pop-up the song’s title and progress bar when it is playing, and allow the user to click on the progress bar to get to a certain place in the song are all examples of features.

HTML code for Music player

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
/>
<title>Music Player</title>
</head>
<body>
<h1>Music Player</h1>
<div class="music-container" id="music-container">
<div class="music-info">
<h4 class="title" id="title"></h4>
<div class="progress-container" id="progress-container">
<div class="progress" id="progress"></div>
</div>
</div>
<audio src="./music/happyrock.mp3" id="audio"></audio>
<div class="img-container">
<img src="./images/happyrock.jpg" alt="music-cover" id="cover" />
</div>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fa fa-backward" aria-hidden="true"></i>
</button>
<button id="play" class="action-btn action-btn-big">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
<button id="next" class="action-btn">
<i class="fa fa-forward" aria-hidden="true"></i>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

First, let’s make the index.html file. We will include the CSS for our Style.css there. We will use some icons in this project, thus we will include the font-awesome link to our Head section in order to incorporate those icons into our project.

ADVERTISEMENT

We will now integrate the Javascript function into our project by adding the link to our Javascript. Because we want the browser to render our javascript at the end and because we want our function to only run after our project body, we will include the link inside our body.

ADVERTISEMENT

//Head Section
<link rel="stylesheet" href="style.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
//Body Section
<script src="app.js"></script>

Adding the Structure for our Music Player:

  • First of all using the <h1> tag selector we will give a heading to our music player.
  • Now, inside the container we just created for the music, we’ll construct another div for the music information. Finally, we’ll add the music title using the <h4> tag. All of this will be done using the
    <div> tag.
  • The next, previous, and play/pause buttons will now be included as icons to the music navigation section.

There is all HTML code for the Music player. Now, you can see output without CSS, then we write CSS for our music player.

output

ADVERTISEMENT

html code for music player ouput

 

CSS Code for Music player 

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
* {
outline: none;
box-sizing: border-box;
}
body {
background-image: linear-gradient(
0deg,
rgba(247, 247, 247, 1) 23.8%,
rgba(252, 221, 221, 1) 92%
);
font-family: "Open Sans", sans-serif;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.music-container {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
display: flex;
padding: 20px 30px;
position: relative;
margin: 100px 0;
z-index: 10;
}
.img-container {
position: relative;
width: 110px;
}
.img-container::after {
content: "";
background-color: #fff;
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, 50%);
box-shadow: 0 0 0px 10px #000;
}
.img-container img {
border-radius: 50%;
object-fit: cover;
height: 110px;
width: inherit;
position: absolute;
bottom: 0;
left: 0;
animation: rotate 3s linear infinite;
animation-play-state: paused;
}
.music-container.play .img-container img {
animation-play-state: running;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.action-btn {
background-color: #fff;
border: 0;
color: #dfdbdf;
font-size: 20px;
cursor: pointer;
padding: 10px;
margin: 0 20px;
}
.action-btn.action-btn-big {
color: #cdc2d0;
font-size: 30px;
}
.music-info {
background-color: rgba(255, 255, 255, 0.5);
width: calc(100% - 40px);
padding: 10px 10px 10px 150px;
border-radius: 15px 15px 0px 0px;
position: absolute;
top: 0;
left: 20px;
opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
z-index: 0;
}
.music-container.play .music-info {
opacity: 1;
transform: translateY(-100%);
}
.music-info h4 {
margin: 0;
}
.progress-container {
background-color: #fff;
border: 5px;
cursor: pointer;
margin: 10px 0;
height: 4px;
width: 100%;
}
.progress {
background-color: #fe8daa;
border-radius: 5px;
height: 100%;
width: 0%;
transform: width 0.1s linear;
}
Step1:We will add some fresh Google fonts to our music player using the Google import link, and we will use the universal selection (*) to set the outline to “none” and the box-sizing to “border-box.”
We will apply a linear gradient backdrop to the body of the webpage using the body tag selector. We will also use the font-family property to set the font family as “open-sans,” and the text-align property to centre the text.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
* {
outline: none;
box-sizing: border-box;
}
body {
background-image: linear-gradient(
0deg,
rgba(247, 247, 247, 1) 23.8%,
rgba(252, 221, 221, 1) 92%
);
font-family: "Open Sans", sans-serif;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

Step2:We will now style the music container using the class selector. We’ll make the background white, and we’ll give our audio container a box shadow using the box shadow property. We also gave our music container a 100-pixel margin.

Using the keyframes we will add an animation effect to our music player we will add rotate effect to the music disc and we will also add different keyframes to add the rotating look to our music player.

ADVERTISEMENT

.img-container img {
border-radius: 50%;
object-fit: cover;
height: 110px;
width: inherit;
position: absolute;
bottom: 0;
left: 0;
animation: rotate 3s linear infinite;
animation-play-state: paused;
}
.music-container.play .img-container img {
animation-play-state: running;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.action-btn {
background-color: #fff;
border: 0;
color: #dfdbdf;
font-size: 20px;
cursor: pointer;
padding: 10px;
margin: 0 20px;
}
.action-btn.action-btn-big {
color: #cdc2d0;
font-size: 30px;
}
.music-info {
background-color: rgba(255, 255, 255, 0.5);
width: calc(100% - 40px);
padding: 10px 10px 10px 150px;
border-radius: 15px 15px 0px 0px;
position: absolute;
top: 0;
left: 20px;
opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
z-index: 0;
}
.music-container.play .music-info {
opacity: 1;
transform: translateY(-100%);
}
.music-info h4 {
margin: 0;
}

Step3: The progress bar will now have styling added using the class selector (.progress-container). We’ll choose white as the backdrop colour and give our progress bar a 5 px border.

ADVERTISEMENT

.progress-container {
background-color: #fff;
border: 5px;
cursor: pointer;
margin: 10px 0;
height: 4px;
width: 100%;
}
.progress {
background-color: #fe8daa;
border-radius: 5px;
height: 100%;
width: 0%;
transform: width 0.1s linear;
}
There is all CSS code for the Music player. Now, you can see the output with Html CSS For Music Player, then we write Javascript code for our music player. Here is our updated output CSS.
 
 
output Html Css Music player

 

Music player html | create music player using html css javascript
 

 

Now write javascript code for the Music player!

Javascript code for Music player

const musicContainer = document.getElementById("music-container");
const playBtn = document.getElementById("play");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const audio = document.getElementById("audio");
const progress = document.getElementById("progress");
const progressContainer = document.getElementById("progress-container");
const title = document.getElementById("title");
const cover = document.getElementById("cover");
// Songs Titles
const songs = ["happyrock", "jazzyfrenchy", "ukulele"];
// KeepTrack of song
let songIndex = 0;
// Initially load song details into DOM
loadSong(songs[songIndex]);
// Update song details
function loadSong(song) {
title.innerText = song;
audio.src = `./music/${song}.mp3`;
cover.src = `./images/${song}.jpg`;
}
// Play Song
function playSong() {
musicContainer.classList.add("play");
playBtn.querySelector("i.fa").classList.remove("fa-play");
playBtn.querySelector("i.fa").classList.add("fa-pause");
audio.play();
}
// Pause Song
function pauseSong() {
musicContainer.classList.remove("play");
playBtn.querySelector("i.fa").classList.add("fa-play");
playBtn.querySelector("i.fa").classList.remove("fa-pause");
audio.pause();
}
// Previous Song
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;
}
loadSong(songs[songIndex]);
playSong();
}
// Update Progress bar
function updateProgress(e) {
const { duration, currentTime } = e.srcElement;
const progressPerCent = (currentTime / duration) * 100;
progress.style.width = `${progressPerCent}%`;
}
// Set Progress
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}
// Event Listeners
playBtn.addEventListener("click", () => {
const isPlaying = musicContainer.classList.contains("play");
if (isPlaying) {
pauseSong();
} else {
playSong();
}
});
// Change Song
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);
// Time/Song Update
audio.addEventListener("timeupdate", updateProgress);
// Click On progress Bar
progressContainer.addEventListener("click", setProgress);
// Song End
audio.addEventListener("ended", nextSong);

To manage all of the player’s functions, a number of functions cooperate. Accessing the HTML components and defining all the variables.
The required HTML layout components that must be altered dynamically are first chosen using the getElementById() method, and then they are assigned to variable names so they may be accessed and updated.

Now, we’ll write various functions for various functionalities. A playsonf function will be created in the function, and after that, we’ll just add another class by using the add.classlist method. Changes to the play and pause icons will be made using the add.classlist function.

ADVERTISEMENT

Similar to the previous event, we’ll develop a function for it and employ the click event listener when the user clicks the symbol, triggering the click event and altering the music player.

ADVERTISEMENT

Final output

Music player html | create music player using html css javascript
 

note- use music & image yourself!

ADVERTISEMENT

We have completed our javascript section for the music players,  Here is our updated output with javascript. Hope you like the Music player code using html,css, and javascript. You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

ADVERTISEMENT

50+ Frontend Project Code 

ADVERTISEMENT

In this post, we learn how to create a Music player using simple HTML and CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Which code editor do you use for this Music Player project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

0 thoughts on “Music Player Using HTML CSS & Javascript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT