WordPress Audio: Add a Download Button to mediaelement.js

So I got a call this morning asking how to download an audio file that WordPress was presenting with medialement.js. As you might have noticed, since WordPress started providing an audio player there hasn’t been an easy way to allow audio files to be downloaded as well as played. This has bothered me for a while, but this morning’s call gave me the incentive to look into it further.

My first thought was to use a custom field to store the audio file URL. Then I could display both a player and a download button based on the same URL. However, the site I was working on had years worth of audio, and I didn’t want to go through post by post and move the audio file URL out of the post editor and into a custom field. My next thought was to modify how WordPress loaded the media player and hopefully filter the output to add a download link. While this may be possible, I ended up deciding against digging into the filters in WordPress core and just used a few lines of jQuery. Here’s what did it:

// Add download links to default audio player.
$( document ).ready(function() {
	$('audio').each(function( index ) {

		var source = $(this).find('source').attr('src');

		if ( source != '' ) {
			$(this).after('<a href="' + source + '" class="audio-download" download>Download</a>');
		}

	});
});

Keep in mind you’ll need to load jQuery in order for this to run.

I just added a few lines of CSS to style the new download buttons:

a.audio-download {
	margin-top: 1em;
	background: #eee;
	padding: 0.5em 1.5em;
	border-radius: 5px;
	display: inline-block;
}

a.audio-download:hover {
	background: #ddd;
}

…and that’s it!

 

  • PublishedJanuary 29, 2015
  • Posted InHacks

WordPress, CDNs, and jQuery

Last week, Pippin Williamson published a post titled “Why Loading Your Own jQuery is Irresponsible.” This very issues was brought up tonight at the Seattle WordPress meetup, which led to a lively discussion and referenced Pippin’s post. Please, for the love of the WordPress community, just use the version of jQuery bundled in WordPress core…

However, if you’re going to load jQuery irresponsibly, don’t do it such a half hearted way by loading whichever version of jQuery is the latest at the time! Throw caution to the wind and use the new “Random jQuery” plugin! It loads a random version of jQuery from Google’s CDN with no fallback! It supports versions 1.2.3 all the way through 1.9.1! Also it will save people hours of work because rather than being forced to debug a theme that hard coded it’s own version of jQuery, troubleshooters can simply deactivate the plugin! It’s a win/win for everyone! Yes, I did just use an exclamation point at the end of every sentence in this entire paragraph!

Download the “Random jQuery” plugin now!

  • PublishedMarch 15, 2013
  • Posted InHacks

Delicious Bookmarks and Firefox 4

For those of you who are really missing your Delicious bookmarks after upgrading to Firefox 4 (or who haven’t upgraded because there is no Delicious add-on yet), there is a solution! First, go to the Delicious add-on page, click the “Continue to Download” button. Then, instead of simply clicking the “Accept and Install” button, right click it and save the resulting XPI file. For all practical purposes, an XPI file is simple a ZIP folder for Firefox add-ons. You’ll need to open that folder and make a few changes. First, open the install.rdf file with a text editor and find this line:

em:maxVersion="4.0b3pre" />

This is what is keeping the add-on from installing properly. To allow the add-on to be installed on any version of Firefox 4.0, you’ll need to use this line instead:

em:maxVersion="4.0.*" />

Make sure you save the the changes you’ve made. Next, delete the entire “META-INF” folder from within the XPI folder. It holds the checksums of the original add-on. Now that we’ve modified the install.rdf file, the checksums are wrong. Removing the “META-INF” folder will take care of that. Now open Firefox and go to “File > Open File… ” Then find your newly modified Delicious XPI file and open it. This should bring up the dialog box for installing Firefox add-ons. After restarting your browser, you should be greeted by a fully functioning Delicious add-on running on Firefox 4!

Update: It has come to my attention that there is also a beta version of the plugin with Firefox 4 support: https://addons.mozilla.org/en-US/firefox/addon/delicious-extension/

  • PublishedMay 25, 2011
  • Posted InHacks
  • DifficultyBegginer

Simple PHP Redirect in WordPress

Note: This post was originally written for my blog over at sackclothstudios.com. However, with the changes I’m making to that site, I figured the post would be of more use here on this site.

Update: there is also a WordPress function for redirects: wp_redirect()

Sometimes when using WordPress you want to include a non-Wordpress page in your main navigation while still maintaining the simplicity of the wp_list_pages() function. I know there are plugins that do this type of thing, but many of them are just overkill. I just needed one non-Wordpress page on my menu, so here’s what I did. First, I created a page from within WordPress and gave it a heading but left the body blank. My page was called “Purchase” but you can name it whatever you’d like. This is the name that will show up in your navigation menu. Then I went to the header.php file of my theme and added this at the top:

if(is_page('purchase')){
header("HTTP/1.1 301 Moved Permanently");
header("Status: 301 Moved Permanently");
header("Location: http://www.example.com/");
header("Connection: close");
exit(0); // Optional, prevents any accidental output
}

Obviously, you’ll want to change the if statement to check for the blank page that you set up. Then change “http://www.example.com/” to whatever page you want the redirect to point to. Make sure that you put the code at the very top of the header.php file. If something else comes before it, it won’t work.

I first found this PHP redirect on  Steven Hargrove’s blog.  He gives examples of this in a number of different languages. However, I adapted it to WordPress and added the ” header( “Connection: close”);” line to get it working properly. I’d love to hear how you solve this little WordPress problem. If you have a different solution, please leave a comment below with a brief explaination. Thanks.

Update #1: If you want to make a temporary redirect (302), rather than a permanent one (301) use the code below:

if(is_page('purchase')){
header("Location: http://www.example.com/");
header("Connection: close");
exit(0); // Optional, prevents any accidental output
}

Update #2: Algen asked if it was possible to create a delayed redirect. It is possible, using either PHP or HTML. As Dhruv pointed out in the comments, PHP handles it like this:

header( 'refresh:5;url=http://www.example.com' );

If you’d prefer to use HTML, it can be done like this:

<meta http-equiv="refresh" content="10;url=http://www.example.com">

Menus Hiding Behind Flash

hiding-menus

I ran across an issue today where a drop down menu was dropping behind a flash object rather than in front. It seems to be a pretty common problem, so I thought I’d share the solution.

1. Start with the embed code

To make sure that the drop-down menu appears above the flash object, there’s a single parameter we need to add to the embed code. First of all, here’s what a normal YouTube embed code looks like:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>
</object>

2. Add a parameter

We’ll need to add the parameter in two places. First we’ll need to add the following code after the other param fields (or before, it doesn’t really matter).

<param name="wmode" value="transparent">

Next, wmode=”transparent” needs to be added to the actual embed tag like this:

<embed
wmode="transparent"
src="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>

That’s it!

So all together, this is how it should look when we’re done:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<embed
type="application/x-shockwave-flash"
width="425"
height="344"
src="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"
allowscriptaccess="always"
allowfullscreen="true"
wmode="transparent">
</embed>
</object>

Hope that helps!

Image by Lili Vieira de Carvalho

  • PublishedAugust 6, 2009
  • Posted InHacks