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.6/skin/uno/jplayer.uno.min.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jplayer-jukebox/0.6.6/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>