Simple HTML Music Player | Music Player Project in HTML and CSS - codewithrandom

Simple HTML Music Player | Music Player Project in HTML and CSS 

music player html css

Welcome๐ŸŽ‰ to Code With Random blog. In this blog, we learn how to create a Music player HTML. 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.

HTML code for Music player

 <!DOCTYPE html>  
 <html lang="en">  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <link rel="stylesheet" href="style.css" />  
   <title>Music Player</title>  
   <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>  
    <audio src="./music/happyrock.mp3" id="audio"></audio>  
    <div class="img-container">  
     <img src="./images/happyrock.jpg" alt="music-cover" id="cover" />  
    <div class="navigation">  
     <button id="prev" class="action-btn">  
      <i class="fa fa-backward" aria-hidden="true"></i>  
     <button id="play" class="action-btn action-btn-big">  
      <i class="fa fa-play" aria-hidden="true"></i>  
     <button id="next" class="action-btn">  
      <i class="fa fa-forward" aria-hidden="true"></i>  
   <script src="script.js"></script>  
There is all HTML code for the Music player. Now, you can see output without CSS, then we write CSS for our music player.
html code for music player ouput

CSS Code for Music player 

 @import url(";600;700&display=swap");  
 * {  
  outline: none;  
  box-sizing: border-box;  
 body {  
  background-image: linear-gradient(  
   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;  
 } .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-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;  

Now we have completed our CSS section,  Here is our updated output CSS.

Music player html | create music player using html css javascript

Now add javascript 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  
 // Update song details  
 function loadSong(song) {  
  title.innerText = song;  
  audio.src = `./music/${song}.mp3`;  
  cover.src = `./images/${song}.jpg`;  
 // Play Song  
 function playSong() {  
 // Pause Song  
 function pauseSong() {  
 // Previous Song  
 function prevSong() {  
  if (songIndex < 0) {  
   songIndex = songs.length - 1;  
 // Next Song  
 function nextSong() {  
  if (songIndex > songs.length - 1) {  
   songIndex = 0;  
 // Update Progress bar  
 function updateProgress(e) {  
  const { duration, currentTime } = e.srcElement;  
  const progressPerCent = (currentTime / duration) * 100; = `${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) {  
  } else {  
 // 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);  
Final output

Music player html | create music player using html css javascript

note- use music & image yourself!
Now we have completed our javascript section,  Here is our updated output with javascriptHope you like Music player. You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you ๐Ÿ™๐Ÿ’•

Check out more.....

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 


  1. sir i wiil try but i am not understand is javascript put the song file i am beinger web developer sir place fast slove my problam


Post a Comment

Previous Post Next Post