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.

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