Manual

Installation

Include the following lines in HTML page right before the closing </head> tag.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- jPlayer Jukebox add-on -->
<link type="text/css" href="//gyrocode.github.io/jplayer-jukebox/0.6.3/skin/uno/jplayer.uno.min.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jplayer-jukebox/0.6.3/jplayer.jukebox.bundle.min.js"></script>

<script type="text/javascript">   
   $(document).ready(function(){
      // Initialize jPlayerJukebox
      var jpjb = new jPlayerJukebox();
   });
</script>

If you are already using jQuery library on your page, you can skip the line that includes it above.

How to add audio

You add audio to your web page by linking to it:

<a href="http://example.com/song.mp3">My Favorite Tune</a>

You can have more fine-grained control over the player by using attributes of the <a> element, for example:

<a href="http://example.com/song.mp3" title="My Favorite Tune" data-artist="Frank Sinatra">My Favorite Tune</a>

Link attributes

title
Specifies song title.

<a href="http://example.com/song.mp3" title="My Favorite Tune">My Favorite Tune</a>
data-artist
Specifies artist.

<a href="http://example.com/song.mp3" data-artist="Frank Sinatra">My Favorite Tune</a>
data-image
Specifies link to album cover art image.

<a href="http://example.com/song.mp3" data-image="media/cover1.jpg">My Favorite Tune</a>
data-download
Specifies whether a link to download media file should appear in the playlist. Value 1 indicates that the link to download media file should appear in the playlist, any other value or absence of this attribute indicates that the link to download media file will not appear in the playlist.

<a href="http://example.com/song.mp3" data-download="1">My Favorite Tune</a>
data-buy
Specifies a link to purchase media.

<a href="http://example.com/song.mp3" data-buy="https://www.freesound.org/people/lucasgonze/sounds/58970/">My Favorite Tune</a>
class=”jp-media”
Explicitly marks media that should be added to the playlist. Any other links to media files without this class will be ignored.

<a href="http://example.com/song.mp3" class="jp-media">My Favorite Tune</a>
class=”jp-media-ignore”
Marks media that should not be added to the playlist.

<a href="http://example.com/song.mp3" class="jp-media-ignore">My Favorite Tune</a>