Add a Download link to the 1pixelout Audio Player

I love the WordPress plugin Audio Player by 1pixelout, and highly recommend it to folk who want to present audio on their site.  I’d like to be able to offer the file for download too, though, so I’ve created a little download icon that sits beside the player.

Update: this old post has finally expired :) styles have moved on, and you should consider it retired! It takes me back to hear the recording – I don’t make time to play these days!

Here’s a demo:

luscious-woman-afoot[audio:luscious-woman-afoot.mp3]

To set the effect up:

  • upload the icon to your theme’s images/ folder
  • add the following code to your theme’s stylesheet
  • insert the link in to your post with the audio
    • Upload
    • Edit the Link
    • Insert the audio quicktag

Upload the audio:

  • Open up your post
  • Click Add Audio
  • Browse to the track on your hard drive, and select Insert into Post

You should now have a text link in your post which points to the audio file.

Edit the Link:

  • click the link that you’ve inserted, then the Insert/Edit Link button (which looks like a chain)
  • type a title like “Right Click and ‘Save As’ to download this file”
  • switch to HTML mode, and add the class “audio-download” to the link:
<a class="audio-download" title="Right Click and 'Save As' to download" href="http://mysite.com.au/wp-content/uploads/my-audio-filename-goes-here.mp3">

Tip: I use the really handy TinyMCE Advanced plugin, so I replace that last step with:

  • Click on the Advanced tab in the link dialog
  • enter audio-download into the classes field

Insert the audio player quicktag:

  • position the cursor after the link you’ve inserted
  • type: [ audio:my-audio-filename-goes-here.mp3]
    • I’ve added a space after the first square bracket: be sure to remove it, and be careful not to leave any spaces after the colon!

The stylesheet code:

.audio-download {
	background: url("images/audio-download.png") no-repeat scroll 0 0 transparent;
    float: left;
    width: 29px; height: 24px;
	margin-right: 5px;

    text-decoration: none;
    text-indent: -999in;    
}
.audio-download:hover {
	background-position: 0 -24px;
}

The download icon used in this tutorial:

The icon used in this tutorial

Enjoy!

  • http://www.studio678.com Michael Waters

    I am trying to have this functionality also (show both the player and a download link) but clicking on the download link in your example opens a new browser window which then uses the quicktime plugin to start playing the mp3.

    Is it possible to force a download for the download link so I don’t have to provide the instructions (“save as…” etc.), yet have the player function normally and player the mp3 file??

  • http://www.memelab.com.au tim

    Hmm.. great question..

    I’m not sure this is possible, as it depends on the behaviour / settings defined in the user’s browser. In Firefox, you could set this in Preferences (Tools > Options for Windows folk) > Applications tab. Search for mp3 and set the action to Save File. I’m not about to do that, because I want to hear most online mp3’s in the browser window (evaluate before download).

    My demo fails from a usability perspective, because, although there is a tooltip saying ‘Right click and Save As.. to download’, that is not obvious enough. A better solution would be to apply a Fancy Tooltip which is a more aggressive informant.

    If you get around to this, I’m interested in your solution! Thanks, Tim

  • http://www.memelab.com.au tim

    I’ve just noticed that this post got corrupted somewhere along the way – sorry about that – all fixed now.