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.

Here’s a demo:

luscious-woman-afoot

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

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:

a.audio-download {
	display: inline-block;
	float: 	left;
	width:	29px;
	height:	24px;
	background: url(images/audio-download.png) no-repeat 0 0;
	text-indent: -9000px;
	padding: 0 5px 0 0;
}
a:hover.audio-download {
	background-position: 0px -24px;
}

The download icon used in this tutorial:

Enjoy!

Loading image

Click anywhere to cancel