Create An Audio Player with HTML5, CSS, JS and jQuery

Audio player that uses jQuery, Html5 audio, and CSS to create a beautiful-looking audio player with a custom audio playlist and controls.

jquery audio player, html5 audio player with playlist, javascript audio player with playlist, custom audio player html css

How to make use of it:

1. Build the HTML structure for the audio player.

<div id="container">
  <div id="audio-image"> 
    <img class="cover"> 
  </div>
  <div id="audio-player">
    <div id="audio-info">
      <span class="artist"></span> - <span class="title"></span> 
    </div>
    <input id="volume" type="range" min="0" max="10" value="4">
    <br>
    <div id="buttons"> <span>
      <button id="prev"></button>
      <button id="play"></button>
      <button id="pause"></button>
      <button id="stop"></button>
      <button id="next"></button>
      </span> </div>
    <div class="clearfix"></div>
    <div id="tracker">
      <div id="progress-bar"> <span id="progress"></span> </div>
      <span id="duration">0:00</span> </div>
    <div class="clearfix"></div>
    <ul id="playlist" class="hidden">
      <li song="Sample.mp3" cover="cover1.jpg" artist="Linkin Park">Sample.mp3</li>
      <li song="Sample.mp3" cover="cover1.jpg" artist="Linkin Park">Sample.mp3</li>
      <li song="Sample.mp3" cover="cover1.jpg" artist="Linkin Park">Sample.mp3</li>
      <li song="Sample.mp3" cover="cover1.jpg" artist="Linkin Park">Sample.mp3</li>
      <li song="Sample.mp3" cover="cover1.jpg" artist="Linkin Park">Sample.mp3</li>
    </ul>
  </div>
</div>

2. Add custom CSS styles to the audio player.

#audio-image {
  position: relative;
  overflow: hidden;
  height: 200px;
  margin-bottom: 15px;
}

#audio-image .cover { width: 100%; }

#audio-info { text-align: center; }

#audio-info .artist { font-weight: bold; }

input#volume {
  width: 95%;
  margin-left: 2%;
  -webkit-appearance: none !important;
  background: #ccc;
  height: 1px;
  margin-bottom: 20px;
}
input#volume::-webkit-slider-thumb {
 -webkit-appearance:none !important;
 background:url(../images/knob.png) no-repeat;
 height:12px;
 width:12px;
}

#buttons {
  width: 90%;
  display: block;
  margin: 15px auto;
  margin-left: 23px;
  overflow: auto;
}

button#play {
  width: 70px;
  height: 70px;
  background: url(../images/play.png) no-repeat;
  float: left;
  margin-left: -2px;
}

button#pause {
  width: 70px;
  height: 70px;
  background: url(../images/pause.png) no-repeat;
  float: left;
  margin-left: -2px;
}

button#stop {
  width: 70px;
  height: 70px;
  background: url(../images/stop.png) no-repeat;
  float: left;
  margin-left: 3px;
}

button#prev {
  width: 70px;
  height: 70px;
  background: url(../images/prev.png) no-repeat;
  float: left;
  margin-top: 15px;
}

button#next {
  width: 70px;
  height: 70px;
  background: url(../images/next.png) no-repeat;
  float: right;
  margin-top: 15px;
}

#tracker {
  position: relative;
  width: 100%;
}

#progress-bar {
  width: 80%;
  margin-left: 2%;
  margin-bottom: 20px;
  margin-top: 9px;
  height: 10px;
  background: url(../images/progress_bg.png) no-repeat;
  float: left;
}

#progress {
  background: url(../images/progress.png) no-repeat;
  height: 10px;
  display: inline-block;
}

#duration {
  position: absolute;
  top: 0;
  right: 10px;
  padding: 4px 8px;
  background: #000;
  border-radius: 5px;
}

#playlist { list-style: none; }

#playlist li {
  cursor: pointer;
  margin: 5px;
}

#playlist li.active {
  font-weight: bold;
  padding: 3px;
  background: #666;
}

3. JavaScript (jQuery) to enable the audio player.

var audio;

//Hide Pause
$('#pause').hide();

initAudio($('#playlist li:first-child'));

function initAudio(element){
  var song = element.attr('song');
  var title = element.text();
  var cover = element.attr('cover');
  var artist = element.attr('artist');
  
  //Create audio object
  audio = new Audio('media/'+ song);
  
  //Insert audio info
  $('.artist').text(artist);
  $('.title').text(title);
  
  //Insert song cover
  $('img.cover').attr('src','images/covers/'+cover);
  
  $('#playlist li').removeClass('active');
  element.addClass('active');
}

//Play button
$('#play').click(function(){
  audio.play();
  $('#play').hide();
  $('#pause').show();
  showDuration();
});

//Pause button
$('#pause').click(function(){
  audio.pause();
  $('#play').show();
  $('#pause').hide();
});

//Stop button
$('#stop').click(function(){
  audio.pause();
  audio.currentTime = 0;
});

//Next button
$('#next').click(function(){
  audio.pause();
  var next = $('#playlist li.active').next();
  if(next.length == 0){
    next = $('#playlist li:first-child');
  }
  initAudio(next);
  audio.play();
  showDuration();
});

//Prev button
$('#prev').click(function(){
  audio.pause();
  var prev = $('#playlist li.active').prev();
  if(prev.length == 0){
    prev = $('#playlist li:last-child');
  }
  initAudio(prev);
  audio.play();
  showDuration();
});

//Playlist song click
$('#playlist li').click(function(){
  audio.pause();
  initAudio($(this));
  $('#play').hide();
  $('#pause').show();
  audio.play();
  showDuration();
});

//Volume control
$('#volume').change(function(){
  audio.volume = parseFloat(this.value / 10);
});

//Time/Duration
function showDuration(){
  $(audio).bind('timeupdate',function(){
    //Get hours and minutes
    var s = parseInt(audio.currentTime % 60);
    var m = parseInt(audio.currentTime / 60) % 60;
    if(s < 10){
      s = '0'+s;
    }
    $('#duration').html(m + ':'+ s);
    var value = 0;
    if(audio.currentTime > 0){
      value = Math.floor((100 / audio.duration) * audio.currentTime);
    }
    $('#progress').css('width',value+'%');
  });
}

custom html5 audio player with jquery, audio-player Plugin/Github