jPlayer - jPlayerPlaylist

HTML

<script src="http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js"></script>
<script src="http://jplayer.org/latest/dist/add-on/jplayer.playlist.min.js"></script>
<link rel="stylesheet" href="http://jplayer.org/latest/dist/skin/pink.flag/css/jplayer.pink.flag.min.css">
<button id="btn" type="button">Load song</button>
<hr>
<div class="audio-tag"><div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
	<div class="jp-type-playlist">
		<div class="jp-gui jp-interface">
			<div class="jp-volume-controls">
				<button class="jp-mute" role="button" tabindex="0">mute</button>
				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>
			</div>
			<div class="jp-controls-holder">
				<div class="jp-controls">
					<button class="jp-previous" role="button" tabindex="0">previous</button>
					<button class="jp-play" role="button" tabindex="0">play</button>
					<button class="jp-stop" role="button" tabindex="0">stop</button>
					<button class="jp-next" role="button" tabindex="0">next</button>
				</div>
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
				<div class="jp-toggles">
					<button class="jp-repeat" role="button" tabindex="0">repeat</button>
					<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
				</div>
			</div>
		</div>
		<div class="jp-playlist">
			<ul>
				<li>&nbsp;</li>
			</ul>
		</div>
		<div class="jp-no-solution">
			<span>Update Required</span>
			To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/"...

JavaScript

var myPlaylist;

$(document).ready(function(){

   var cssSelector = {
        jPlayer: "#jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
   };

   var playlist = [];

   var options = {
        playlistOptions: {
            enableRemoveControls: true,
            autoPlay: true
        },
        swfPath: "js/jPlayer",
        supplied: "webmv, ogv, m4v, oga, mp3",
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
   };
    
   myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

   $(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer,  function(){
       $('.musicbar').removeClass('animate');
       $('.jp-play-me').removeClass('active');
       $('.jp-play-me').parent('li').removeClass('active');
   });

   $(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer,  function(){
       $('.musicbar').addClass('animate');
   });

   $(document).on('click', '.jp-play-me', function(e){
       e && e.preventDefault();
       var $this = $(e.target);
       if (!$this.is('a')) $this = $this.closest('a');

       $('.jp-play-me').not($this).removeClass('active');
       $('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

       $this.toggleClass('active');
       $this.parent('li').toggleClass('active');
       if( !$this.hasClass('active') ){
           myPlaylist.pause();
       }else{
           var i = Math.floor(Math.random() * (1 + 7 - 1));
           myPlaylist.play(i);
       }
   });

   $('#btn').on('click', function(){
       loadSong({
           title:"Cro Magnon Man",
           mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
           oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
       });
   });
});

function loadSong(media){
   myPlaylist.add(media);
}