How to Add Download Buttons to jPlayer Playlist

So I had this nice jPlayer playlist all set up on the gench site. I’m using song content types plus Drupal’s Views and jPlayer modules to create the playlist. Swell, but the client wants a little play icon and a download button for each track.

Screen Shot 2013-10-02 at 10.43.19 AM

jQuery to the rescue!…

// playlist buttons
(function($){
    // insert play and download icons to playlist
    $(document).ready(function(){
        $('div.jp-playlist li').find('a').prepend($("<i class=\"icon-play\"></i>"));
        $('div.jp-playlist li').prepend($("<div class=\"download-button\"><i class=\"icon-download\"></i></div>"));

    // enable download button
    $('div.download-button').css('cursor', 'pointer').click(function(event) {
    var $a_href = ($(this).closest('li').find('a').attr('href'));
    event.preventDefault();  //stop the browser from following
    window.location.href = $a_href;
    });
    });
})(jQuery);

For this to work in most browsers, I also had to add the following lines to my site’s .htaccess file…

<FilesMatch "\.(mov|mp3|jpg|pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

It’s also important to reference the font-awesome library, which I’m doing in my theme’s template.php file since I need it on every page (it’s used for the shopping cart icon as well)…

 /*font awesome library is needed for shopping cart icon so we need it in every header*/
function genchstyle_preprocess_html(&$variables) {
drupal_add_css(
'http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css',
array('type' => 'external')
);
}

The player can be found here: http://www.gench.com/mono-poly

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s