Create Custom Music Player using HTML, CSS and JavaScript

In this article, we are going to learn to develop a custom music player using HTML, CSS and JavsScript (preferably JQuery).

Full Source Code :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="https://kit.fontawesome.com/a062562745.js" crossorigin="anonymous"></script>
    <title>MP3 Player</title>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
<style>
body{
  background-color: #2d2d2d;
  color: #ffc266;
  font-family: 'Roboto', sans-serif;
}
#myProgress {
  width: 420px;
   background-color: #d9d9f2; 
  cursor: pointer;
  border-radius: 10px;
}

#myBar {
  width: 0%;
  height: 5px;
  background-color: #ffc266;
  border-radius: 10px;
}

.logo {
  fill: red;
}

.btn-action{
  cursor: pointer;
  padding-top: 10px;
  width: 30px;
}

.btn-ctn, .infos-ctn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.infos-ctn{
padding-top: 20px;
}

.btn-ctn > div {
 padding: 5px;
 margin-top: 18px;
 margin-bottom: 18px;
}

.infos-ctn > div {
 margin-bottom: 8px;
 color: #ffc266;
}

.first-btn{
  margin-left: 3px;
}

.duration{
  margin-left: 10px;
}

.title{
  margin-left: 10px;
  width: 210px;
  text-align: center;
}

.player-ctn{
  border-radius: 15px;
  width: 420px;
  padding: 10px;
  background-color: #373737;
  margin:auto;
  margin-top: 100px;
}

.playlist-track-ctn{
  display: flex;
  background-color: #464646;
  margin-top: 3px;
  border-radius: 5px;
  cursor: pointer;
}
.playlist-track-ctn:last-child{
  /*border: 1px solid #ffc266; */
}

.playlist-track-ctn > div{
  margin:10px;
}
.playlist-info-track{
  width: 80%;
}
.playlist-info-track,.playlist-duration{
  padding-top: 7px;
  padding-bottom: 7px;
  color: #e9cc95;
  font-size: 14px;
  pointer-events: none;
}
.playlist-ctn{
   padding-bottom: 20px;
}
.active-track{
  background: #4d4d4d;
  color: #ffc266 !important;
  font-weight: bold;
  
}

.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
  color: #ffc266 !important;
}


.playlist-btn-play{
  pointer-events: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
.fas{
  color: #ffc266;
  font-size: 20px;
}
.file-select center{
  display: flex;
    align-items: center;
    justify-content: center;
    width: 420px;
    background: #555;
    padding: 10px 0px;
    margin: 0 auto;
    cursor: pointer;
}
.files{
  display: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #111; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #222; 
}
.timer{
  width:100%;
}
.title{
  text-align: center;
    width: 540%;
}
</style>




<div class="player-ctn">
  <div class="infos-ctn">
    <div class="timer">00:00</div>
    <div class="title"></div>
    <div class="duration">00:00</div>
  </div>
  <div id="myProgress">
    <div id="myBar"></div>
  </div>
  <div class="btn-ctn">
     <div class="btn-action first-btn" onclick="previous()">
        <div id="btn-faws-back">
          <i class='fas fa-step-backward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="rewind()">
        <div id="btn-faws-rewind">
          <i class='fas fa-backward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="toggleAudio()">
        <div id="btn-faws-play-pause">
          <i class='fas fa-play' id="icon-play"></i>
          <i class='fas fa-pause' id="icon-pause" style="display: none"></i>
        </div>
     </div>
     
     <div class="btn-action" onclick="forward()">
        <div id="btn-faws-forward">
          <i class='fas fa-forward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="nextSong()">
        <div id="btn-faws-next">
          <i class='fas fa-step-forward'></i>
        </div>
     </div>
     <div class="btn-mute" id="toggleMute" onclick="toggleMute()">
        <div id="btn-faws-volume">
          <i id="icon-vol-up" class='fas fa-volume-up'></i>
          <i id="icon-vol-mute" class='fas fa-volume-mute' style="display: none"></i>
        </div>
     </div>
  </div>
  <div class="file-select">
  <center>Select mp3 Files to Play</center>

</div>
  <div class="playlist-ctn" id="songs-list"></div>
</div>

  </body>
</html>



<input type="file" class="files" accept=".mp3,audio/*" multiple>

<audio src="" id="player"></audio>


<script>
  $('.files').on('change', function(e) {
    var target = e.currentTarget;
    var files = target.files;
    songs = [];
    for(var i=0;i<files.length;i++){
      src = URL.createObjectURL(files[i]);
      temp = {};
      temp.name = files[i].name;
      temp.src = src;
      songs.push(temp);
    }
    setSongs(songs);
  });


  function setSongs(songs){
    html = '';
    for(var i=0;i<songs.length;i++){
      html += '<div data-src="'+songs[i].src+'" class="playlist-track-ctn" id="ptc-'+i+'" data-index="'+i+'"><div class="playlist-btn-play" id="pbp-'+i+'"><i class="fas fa-play" height="40" width="40" id="p-img-'+i+'" aria-hidden="true"></i></div><div class="playlist-info-track">'+songs[i].name+'</div></div>';
    }
    $("#songs-list").append(html);
  }

  $(document).on('click','#songs-list .playlist-track-ctn',function(){
    src = $(this).attr('data-src');
    play(src);
  });

  function formatNumber(num){
    if(num<10){
      return '0'+num;
    }
    return num;
  }

  function setDuration(seconds){
    time = $("#player")[0].duration;
    minutes = Math.floor(time / 60);
    seconds = parseInt(time - minutes * 60);
    $(".duration").html(formatNumber(minutes)+':'+formatNumber(seconds));
  }
  audio = document.getElementById('player');

  audio.addEventListener("ended", function(){
    audio.currentTime = 0;
    audio.play();
  });


  audio.addEventListener('timeupdate',function(){
      currentTime = audio.currentTime;
      percent = (currentTime/$("#player")[0].duration)*100;
      document.getElementById("myBar").style.width = percent + "%";
      currentTime = document.getElementById('player').currentTime;
      minutes = Math.floor(currentTime / 60);
    seconds = parseInt(currentTime - minutes * 60);
    $(".timer").html(formatNumber(minutes)+':'+formatNumber(seconds));
  },false);

  function play(src){
    $("#player").attr('src',src);
    $("#player")[0].play();
    $("#icon-play").hide();
    $("#icon-pause").show();
    $(".playlist-track-ctn").removeClass('active-track');
    $(".playlist-track-ctn[data-src='"+src+"']").addClass('active-track');
    $(".title").html($(".playlist-track-ctn.active-track").text());
    setTimeout(function(){
      setDuration();
    },1000);
  }

  function nextSong(){
    current = $(".active-track");
    next = current.next('.playlist-track-ctn');
    next.click();
  }

  function previous(){
    current = $(".active-track");
    next = current.prev('.playlist-track-ctn');
    next.click();
  }

  function toggleAudio() {
    var audioElem = document.getElementById('player');
    if(audioElem.getAttribute('data-src')==''){
      $("#songs-list .playlist-track-ctn:first").click();
    }
    else{
      if (audioElem.paused){
        audioElem.play();
        $("#icon-play").hide();
        $("#icon-pause").show();
      }
      else{
        audioElem.pause();
        $("#icon-play").show();
        $("#icon-pause").hide();
      }
    }
  }

  function toggleMute() {
    var audioElem = document.getElementById('player');
    if (audioElem.muted){
      audioElem.muted = false;
      $("#icon-vol-up").show();
      $("#icon-vol-mute").hide();
    }
    else{
      audioElem.muted = true;
      $("#icon-vol-up").hide();
      $("#icon-vol-mute").show();
    }
  }


  var progressbar = document.querySelector('#myProgress');
  	progressbar.addEventListener("click", seek.bind(this));


  	function seek(event) {
      var percent = event.offsetX / progressbar.offsetWidth;
      $("#player")[0].currentTime = percent * $("#player")[0].duration;
      document.getElementById("myBar").style.width = percent*100 + "%";
    }

  $(".file-select center").click(function(){
    $(".files").click();
  });

  function forward(){
    var percent = parseInt(document.getElementById("myBar").style.width);
    total = $("#player")[0].duration;
    increase_percent = (100/total)*5;
      $("#player")[0].currentTime = $("#player")[0].currentTime + 5;
      document.getElementById("myBar").style.width = percent+5 + "%";
  }

  function rewind(){
    var percent = parseInt(document.getElementById("myBar").style.width);
    total = $("#player")[0].duration;
    increase_percent = (100/total)*5;
      $("#player")[0].currentTime = $("#player")[0].currentTime - 5;
      document.getElementById("myBar").style.width = percent-5 + "%";
  }
</script>

 

Design Reference : https://codepen.io/vanderzak/pen/BayjVep

Follow this video for complete guidance :