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
    // insert play and download icons to playlist
        $(' li').find('a').prepend($("<i class=\"icon-play\"></i>"));
        $(' li').prepend($("<div class=\"download-button\"><i class=\"icon-download\"></i></div>"));

    // enable 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;

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

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) {
array('type' => 'external')

The player can be found here:

Leave a Reply

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

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

Facebook photo

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

Connecting to %s