Modification of the Jplayer Jukebox to load tracks as needed and grab meta-data from media.sas

pennsound-custom-css.css

<style type="text/css">
.jp-jukebox .jp-gui-bg {
  background-color:#f3f2f4 !important;
}

.jp-app-bar, .jp-toggles {
	display:none !important;
	}

.faked-jp-page-btn-play, .faked-jp-page-btn-pause {
	cursor: pointer; 
	cursor: hand;
	}
	
.faked-jp-page-btn-play {
content: url(http://www.writing.upenn.edu/images/play.gif); 
margin: 0 4px 0 0;
	}

/* this is for Firefox */
.faked-jp-page-btn-play:before {
content: url(http://www.writing.upenn.edu/images/play.gif);
margin: 0 0px 0 0;
	}
	
.faked-jp-page-btn-pause {
	content: url(http://writing.upenn.edu/images/stop.gif);
	margin: 0 4px 0 0;
	}
	
/* this is for Firefox */
.faked-jp-page-btn-pause:before {
	content: url(http://writing.upenn.edu/images/stop.gif);
	margin: 0 0px 0 0;
	}

pennsound_jukebox.js

/**
 * Script to aid in pennsound pages to load and play mp3s
 * without leaving the actual page.
 *
 * The reason this script was need was that the jPlayerJukebox
 * was slowing down the loading of the page by trying to load
 * all of the mp3s. In pages with 100+ mp3 this was causing
 * significant slowdown
 *
 * This script interacts with the jPlayer, jPlayerPlaylist and jPlayerJukebox
 * and overrides some of the functionality to load the mp3s
 * into the jplayer jukebox (jpjp) just when they are needed.
 * This is accomplised by the following:
 * 
 * - Upon loading page
 *       - intentionally disable jukebox parsing of page
 *       - create jpjb.tracks to store all the tracks in the page
 *       - creats jpjb.tracksLoaded to store which tracks have been loaded in jpjb
 *       - for each mp3 link create a clickable span to play the track reference with trackIndex
 *       - load the first song into jukebox
 * - Upon playing a track (by clicking on span or hitting Next)
 *       - add the song to the jpjb and start playing (if it was already added just play it)
 *       - add the next song to the jpjb so "next" button will work
 *
 */
$(document).ready(function(){
    // Initialize jPlayerJukebox
    window.jpjb = new jPlayerJukebox({
        'jukeboxOptions': {
            'position': 'float-bl',
            'className': 'ui-light ui-flat',
            'playLink': false,
            'autoAdvance': false,
            'selectorParse': '.findNone', //this disables parsing
        },
        play: function(e){
            //open the player up
            if(jpjb){ jpjb.setViewState('maximized', 400); }
            
            //remove the pause button from all other buttons
            $('.faked-jp-page-btn-pause')
                .addClass('faked-jp-page-btn-play')
                .removeClass('faked-jp-page-btn-pause');

            //find which mp3 we are playing
            var mp3Url = e.jPlayer.status.src;
            var mp3UrlSpaces = e.jPlayer.status.src.replace(/%20/g, ' ');
            //add the pause button to the appropriate play button
            $('span[data-mp3_url="' + mp3Url + '"], span[data-mp3_url="' + mp3UrlSpaces +'"]')
                .addClass('faked-jp-page-btn-pause')
                .removeClass('faked-jp-page-btn-play');

            //jpjb.showPlaylist(true);
        },
        setmedia: function(e){
            //find which mp3 we are playing
            var mp3Url = e.jPlayer.status.src;
            //get the track index
            var trackIndex = $('a[href="' + mp3Url + '"]').first().attr('data-trackindex');
            var nextTrackIndex = parseInt(trackIndex) + 1;
            //add the next track to the index
            window.jpjb.addTrackToPlaylist(nextTrackIndex);
            

        },
        loadedData: function(e) { console.log('loadedData'); }
    });

    //store the array of songs loaded
    window.jpjb.tracks = [];
    window.jpjb.tracksLoaded = [];

    //add the play button to each link
    $("a").each(function(index, object) {
        var $a = $(object);
        //check that the link has an href tag ending in .mp3
        var href = $a.attr('href');
        if(typeof href != 'undefined'
            && href.substring(href.length - 4).toLowerCase() == '.mp3'
        ){
            $a.attr('data-trackindex', window.jpjb.tracks.length);
            //add the button with a handle to the mp3 file
            $a.before('<span class="faked-jp-button faked-jp-page-btn-play"' 
                + 'data-trackindex="' + window.jpjb.tracks.length + '"'
                + 'data-mp3_url="' + href + '"'
                + ' ></span>'
            );
            window.jpjb.tracks.push({
                url: href,
                playlistIndex: -1,
                metaDataRetrieved: false,
                title: '',
                artist: ''
            });
        }
    });


    ///handle when we click on a faked play button
    $("body").on('click', 'span.faked-jp-page-btn-play', {}, function(e){
        //set all theo
        var $this = $(this);
       //grab the mp3 value of the link
        var trackIndex = $this.attr('data-trackindex');
        jpjb.addTrackToPlaylist(parseInt(trackIndex), true);
    });

    ///handle when we click on a faked pause button
    $("body").on('click', 'span.faked-jp-page-btn-pause', {}, function(e){
        //set all theo
        window.jpjb.pause();
        var $this = $(this);
        //set all other paused buttons to true
        $this.addClass('faked-jp-page-btn-play');
        $this.removeClass('faked-jp-page-btn-pause');
    });

    /**
     * Function which adds a track to the playlist
     * by first trying to call the media.sas webservice
     * to get meta data info
     *
     * @param url - the index of the track 
     * @param play - flag indicating if you want the track to play once loaded
     * @return - the index of the track in the playlist array
     */
    window.jpjb.addTrackToPlaylist = function(trackIndex, play = false) {

        //check to see if this track is already loaded 
        var track = this.tracks[trackIndex];

        //make sure this track index exists
        if (typeof track == 'undefined') return;

        //make sure it hasn't already been added
        if(track.playlistIndex >= 0) {
            if(play) window.jpjb.playTrack(trackIndex);
            return;
        }

        //add this track to the playlist index
        window.jpjb.tracks[trackIndex].playlistIndex = window.jpjb.tracksLoaded.length;
        window.jpjb.tracksLoaded.push(trackIndex);

        var url = track.url;
        var mediaBaseUrl = '';

        //check to see if this mp3 is coming from media.sas (https or http)
        var mediaBaseUrl1 = 'http://media.sas.upenn.edu/';
        var mediaBaseUrl2 = 'https://media.sas.upenn.edu/';
        if(url.substring(0,mediaBaseUrl1.length) == mediaBaseUrl1) {
            mediaBaseUrl = mediaBaseUrl1;
        }
        else if(url.substring(0,mediaBaseUrl2.length) == mediaBaseUrl2) {
            mediaBaseUrl = mediaBaseUrl2;
        }

        //if not from media.sas just add the url to the player
        if(mediaBaseUrl == '') {
            window.jpjb.add({
                'mp3': url,
                'title': url
            });
            if(play) window.jpjb.playTrack(trackIndex);
        }
        //otherwise go grab the title from the web service
        else {
            var mediaPath = url.substring(mediaBaseUrl.length);
            var serviceUrl = 'https://media.sas.upenn.edu/service.php?action=info&file=' + mediaPath;
            $.ajax({
                url: serviceUrl,
                dataType: 'xml',
                timeout: 5000,
                success:  function(xml) {
                    //we got xml back from media sas which contains metadata
                    var $xml = $(xml);
                    var options = {'mp3': url, 'title': mediaPath, 'artist': ''};
                    //if title and artist exists update the options
                    if($xml.find('title').length > 0) options.title = $xml.find('title').text();
                    if($xml.find('artist').length > 0) options.artist = $xml.find('artist').text();
                    //add to jukebox
                    window.jpjb.add(options);
                    //update the internal track array
                    window.jpjb.tracks[trackIndex].title = options.title;;
                    window.jpjb.tracks[trackIndex].artist = options.artist;;
                    window.jpjb.tracks[trackIndex].metaDataRetrieved = true;
                    if(play) window.jpjb.playTrack(trackIndex);
                },
                //something went wrong with the meta data lookup - just load the title
                error: function() {
                    window.jpjb.add({ 'mp3': url, 'title': mediaPath });
                    if(play) window.jpjb.playTrack(trackIndex);
                }
            });
        }

    };

    //play the actual track
    window.jpjb.playTrack = function(trackIndex) {
        var track = window.jpjb.tracks[trackIndex];
        if(track.playlistIndex > -1) {
            window.jpjb.play(track.playlistIndex);
        }
        else {
            window.jpjb.addTrackToPlaylist(trackIndex, true);
        }
    }

    //load the first track
    window.jpjb.addTrackToPlaylist(0);
});

template_file.php.html

<!-- Add The following to your html file -->
<link type="text/css" href="[path]/pennsound-custom-css.css" rel="stylesheet" />

<script type="text/javascript" src="[path]/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="[path]/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="[path]/jplayer.jukebox.min.js"></script>
<script type="text/javascript" src="[path]/pennsound_jukebox.js"></script>