iPawd Music Player - HTML

<!--------------------------------------------------------------------------

FELINES THEMES: iPawd Music Player

This custom music player was created using jPlayer. The layout of this player was designed by designed by Katherine from @felinethemes. You may not use it as a base code or redistribute it as your own.

***YOU MUST KEEP THIS CREDIT***

--------------------------------------------------------------------------->
<div id="01" class="popup_block">
<!------------------------------------>
<div class="audio-player">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<!-- Audio Player -->

<!-- Visual Container -->
<div id="jp_container_1" role="application" aria-label="media player">
<div class="jp-type-playlist">

<div class="jp-col1">

<div class="jp-now-playing-art">
<div class="jp-image"></div>
</div>

<div class="jp-now-playing">
<div class="jp-track-name"></div>
<div class="jp-artist-name"></div>
</div>

<div class="jp-controls">
    <button class="jp-previous" role="button" tabindex="0"><i class="fa fa-step-backward"></i></button>
    <button class="jp-play" role="button" tabindex="0"><i class="fa fa-play"></i></button>
    <button class="jp-next" role="button" tabindex="0"><i class="fa fa-step-forward"></i></button>
</div>

<div class="jp-toggles">
<!-- Shuffle Toggle -->
<button class="jp-shuffle" role="button" tabindex="0">
<i class="fa fa-random"></i></button>
<!-- Repeat Toggle -->
<button class="jp-repeat" role="button" tabindex="0"><i class="fa fa-exchange"></i></button>
<button class="jp-mute" role="button" tabindex="0"><i class="fa fa-volume-up"></i></button>
</div>

</div>


<div class="jp-col2">
<!-- Progress bar -->
<div class="jp-progress-container">
<!-- Progress Time -->
<div class="jp-time-holder">
    <span class="jp-current-time" role="timer" aria-label="time">&nbsp;</span>
    <span class="jp-duration" role="timer" aria-label="duration">&nbsp;</span>
</div>
<!-- End Time holder -->

<!-- Progress bar -->
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
<div class="bullet">
</div>
</div>
</div>
</div>
<!-- End Progress bar -->
</div>

<!-- Playlist -->
<div id="playlist-wrap" class="jp-playlist">
<ul>
<li>&nbsp;</li>
</ul>
</div>
<!-- End Playlist -->

</div>

<!-- Volume controls -->
<div class="jp-volume-controls"
<!-- Volume Bar -->
<div class="jp-volume-holder">
<div class="jp-volume-bar">
<div class="jp-volume-bar-value">
<div class="bullet"></div>
</div>
</div>
</div>
<!-- End Volume Bar -->
</div>



</div>
<!-- Player Type Playlist -->
</div>
<!-- End Container -->
<!-- End Fixed Audio Player -->
</div>
</div>
<!---------------------------------------------------------------------->