jPlayer Jukebox - Zero configuration

Example for article at http://www.gyrocode.com/projects/jplayer-jukebox/

HTML

<link rel="stylesheet" href="//gyrocode.github.io/jplayer-jukebox/0.6.0/skin/uno/jplayer.uno.min.css">
<script src="//gyrocode.github.io/jplayer-jukebox/0.6.0/jplayer.jukebox.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<h3><a href="http://www.gyrocode.com/projects/jplayer-jukebox/">jPlayer Jukebox add-on</a></h3>
<a href="http://www.gyrocode.com/projects/jplayer-jukebox/">See full article on Gyrocode.com</a>
<hr><br/>
    
<p>
    
<a href="//gyrocode.github.io/jplayer-jukebox/demo/media/wav.wav">.WAV file</a><br/>
    
<a href="//gyrocode.github.io/jplayer-jukebox/demo/media/mp3.mp3">.MP3 file</a><br/>
    
<a href="//gyrocode.github.io/jplayer-jukebox/demo/media/ogg.ogg">.OGG file</a><br/>
        
</p>

CSS

.jp-page-btn-play:before {
  font-family: FontAwesome;
  content: "\f01d";
  font-size:1.5em;
  vertical-align:middle;
}

.jp-page-btn-pause:before {
  font-family: FontAwesome;
  content: "\f04c";
  font-size:1.5em;
  vertical-align:middle;
}

JavaScript

$(document).ready(function(){  
   // Initialize jPlayerJukebox
   var jpjb = new jPlayerJukebox();
    
   $(document).on('click', '.jp-page-btn-play, .jp-page-link', function(){
      jpjb.setViewState('maximized', 400);
   });       
});