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.
jQuery( 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!
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?
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.
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?
Yes, for most themes, the functions.php file would be the most natural place to add it. Make sure to add it using the wp enqueue script() function. More info here: https://codex.wordpress.org/Function_Reference/wp_enqueue_script
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.
This post explains how to enqueue jQuery and load your own JS file as well. You’ll just need to put the code above in to your own JS file that you’re loading.
https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/
Is there a screenshot of what this looks like?
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!
Thank you for posting this! I tried it today and it still works, albeit with a little modifications. I had to start the code with the following:
jQuery( document ).ready(function($) {
And I also tested it with video files and it does the same (just switch out ‘audio’ to ‘video’ in the code. So thanks again 🙂
Thanks, Happyvisiter! I’ve updated the code example to reflect that change. I definitely should have had it that way to start with.
Thanks for the code, works perfectly!
Is there a way to integrate the button inside the player? Specifically besides the full screen button (to the left).
I’d then use CSS to add an image.
Hi Leandro, that’s a great question! I tested it out, and it looks like the player is provided by the browser. This means that it isn’t a collection of HTML elements, but rather a single element controlled by the browser. Unfortunately, that means we can’t just add our download button inside it. I believe you would need a third-party player such as Flowplayer or JW Player in order to modify the player itself.
Hi Alex,
I found this piece of code and tried modifying it to make it work with video, but had no luck: https://github.com/damiencarbery/audio-shortcode-download-link/blob/master/audio-shortcode-download-link.php
That’s probably because it’s using the wp_audio_shortcode filter. Have you tried using the wp_video_shortcode filter instead?
Hi, thank you very much, I was stuck on this problem and I actually thought of using an ACF to retrieve the link manually but it was way too tedious! Thanks a lot, that’s a huge time saver!
You’re welcome! I’m glad you found it useful.
It’s working like a charm , I added the code to my main custom.js file and added the CSS code and it’s worked fine.
Many Thanks
You’re welcome!