jPlayer Jukebox is add-on to jPlayer that allows to play media files on the page by scanning all links and adding them to a playlist.

Demo is available at gyrocode.com/projects/jplayer-jukebox/.

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

   <!-- jQuery -->
   <script src="proxy.php?url=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.3%2Fjquery.min.js"></script>
   
   <!-- jPlayer Jukebox add-on -->
   <link type="text/css" href="proxy.php?url=http%3A%2F%2Fgyrocode.github.io%2Fjplayer-jukebox%2F0.6.0%2Fskin%2Funo%2Fjplayer.uno.min.css" rel="stylesheet" />
   <script type="text/javascript" src="proxy.php?url=http%3A%2F%2Fgyrocode.github.io%2Fjplayer-jukebox%2F0.6.0%2Fjplayer.jukebox.bundle.min.js"></script>
   
   <script type="text/javascript">
      $(document).ready(function(){
         // Initialize jPlayerJukebox
         var jpjb = new jPlayerJukebox({
            'swfPath': 'http://gyrocode.github.io/jplayer-jukebox/0.6.0/',
            'jukeboxOptions': {
               'position': 'float-bl'
            }
         });
      });
   </script>
   

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

1. Follow instructions in jPlayer Quick Start Guide on how to download and install jPlayer on your server. It is recommended to upload jPlayer into a separate folder, for example /js/jplayer.

2. Download jPlayer Jukebox add-on, unzip the ZIP file and upload the files into the same location where you have uploaded jPlayer files.

   For example, if you have uploaded jPlayer into /js/jplayer folder, then the add-on should be placed in /js/jplayer/add-on folder and Uno skin - in /js/jplayer/skin folder.

3. Include the following lines in HTML page right before the closing </head> tag if you haven't done so already.

   <!-- jQuery -->
   <script src="proxy.php?url=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.3%2Fjquery.min.js"></script>
   
   <!-- jPlayer Jukebox add-on -->
   <link type="text/css" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjs%2Fjplayer%2Fskin%2Funo%2Fjplayer.uno.min.css" rel="stylesheet" />
   <script type="text/javascript" src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjs%2Fjplayer%2Fjquery.jplayer.min.js"></script>
   <script type="text/javascript" src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjs%2Fjplayer%2Fadd-on%2Fjplayer.playlist.min.js"></script>
   <script type="text/javascript" src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjs%2Fjplayer%2Fadd-on%2Fjplayer.jukebox.min.js"></script>
   
   <script type="text/javascript">
      $(document).ready(function(){
         // Initialize jPlayerJukebox
         var jpjb = new jPlayerJukebox({
            'swfPath': '/js/jplayer',
            'jukeboxOptions': {
               'position': 'float-bl'
            }
         });
      });
   </script>
   

   If you have uploaded jPlayer into folder other than /js/jplayer folder, please modify the code accordingly.

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

Documentation is available at gyrocode.com/projects/jplayer-jukebox/.

Please leave your comments or suggestions here. Issues can be reported on github.com.

Support for formats other than MP3 may not be available on all platforms.

• Sound sample is created by Lucas Gonze
• Material Design Icons by Google, CC BY-SA 4.0 License
• Icon font is generated using IcoMoon App

Michael Ryvkin, gyrocode.com

MIT License, opensource.org/licenses/MIT