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!

 

Posted January 29, 2015 by Alex Mansfield

8 responses to “WordPress Audio: Add a Download Button to mediaelement.js”

  1. Hello,
    I need help, please help me understand how i can add the same to my blog. Is it there no way that i can just copy and paste the short cut on my block , and then add the url of the audio that i wan’t to offer for downlaod and it just works?

    • alexmansfield says:

      You’ll need to add the code to either your theme or a plugin and make sure that jQuery is being loaded as well. If all that is in place, then yes, the download button should show up.

  2. elarson says:

    Many thanks for this. It’s exactly what I have been looking for.

    With a child theme, would I add the jQuery to the functions.php?

  3. Prince says:

    Very nice. please could you explain more, how do i get it to work ? I dont know much about the wp_enqueue and you also talked about jQuery.

    Thanks.

  4. Chris says:

    Is there a screenshot of what this looks like?

    • alexmansfield says:

      I don’t have a screenshot of it. However, I can explain a little bit about what the code does. The first section of code simply adds an unstyled link after the media player. The second section of code turns that link into a button with a little bit of padding, a light gray background and rounded corners. I hope that helps!

Leave a Reply

Your email address will not be published. Required fields are marked *

  • PublishedJanuary 29, 2015
  • Posted InHacks