See what we're whipping up!

The built-in WordPress audio player is fine. It’s easy to use, and allows visitors to your site the ability to listen to an MP3 with the click of a mouse.

But have you ever wanted to let your readers download the audio file for offline listening, and wanted that option to be available every time the audio player widget appears in posts on your site? Well, sorry to say, but that functionality is not available.

Until now.

Check it out:

To make that happen on your site, three things are necessary:

1) tell WordPress not to use the native player, but to instead use your custom player
2) code the custom player
3) style the custom player

Now, let’s get into the details …

1) Add this to the functions.php file in the theme you’re using:

// start here
function your_theme_load_js() {
wp_enqueue_script('mediaelement',get_template_directory_uri() .
'/js/mejsfixed.js', array( 'jquery' ), '' ,true);
add_action('wp_enqueue_scripts', 'your_theme_load_js');
// end here

What that does is tells WordPress to ignore (or “deregister”) the built-in mediaelement code. Instead, it’s going to use the /js/mejsfixed.js code.

2) Next, you need to add that /js/mejsfixed.js file. You can download it right here. It’ll end up in your /wp-content/themes/THEMENAME/js/ directory, which you might have to create. If you search through the file, you’ll see that it’s identical to the mediaelement code, except for the following line:

<div class=”podcast-download-link”><a href=”‘‘?_=1’,”).replace(‘?_=2’,”).replace(‘?_=3’,”)+'” target=”_blank”>DOWNLOAD</a></div>

The wrapping DIV is so that I have a lot of control to style the button. The rest of it spits out the link to the MP3. For what I was doing, I had to remove the ?_=1 junk from the end of the MP3 link — that’s why that “replace” stuff is in there. That code removes that extra stuff after the MP3 in the hyperlink. For this particular website, there are 3 MP3s added per post, hence the three “replace” code segments. It may not be elegant, but it works. You may have to add more, or you may have to delete those “replace” code segments, so you only have this:

<div class=”podcast-download-link”><a href=”‘'” target=”_blank”>DOWNLOAD</a></div>

3) Finally, add the styling to the stylesheet (style.css maybe). This is what I used:

.podcast-download-link {
margin: 0 0 6px;
text-align: right;
width: 100%!important;
.podcast-download-link a {
background: #777;
color: #FFF;
text-align: center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
padding: 2px 6px;
font-size: 13px;
.podcast-download-link a:hover {
background: #b00;
color: #fff;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;

That should be it.

Once you update the code on your site, it should automatically add the download link to any player on your site. Boom!

Share this article: Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on StumbleUponPin on PinterestEmail this to someone


  • Clicking the download button opens the file in a new window. How can you make it trigger a download?

    • Hey Tricia,

      Sadly, there really isn’t a universal, cross-browser way to accomplish this. The most supported method at this time would be to add this within the anchor tag:


      The FileName part isn’t locating the filename of the download, but rather renaming the download. Note that this method of forcing the download is only supported in Chrome, Firefox, and Opera at this time. IE and Safari do not support it.

  • I was able to accomplish a “force mp3/wav” download by adding the following code to the .htaccess file.

    ForceType application/octet-stream
    Header set Content-Disposition attachment

    • By the way thanks for this download fix for the built in wordpress player. Exactly what I needed. Easy to setup and use.


  • ForceType application/octet-stream
    Header set Content-Disposition attachment

  • When trying to add the code described above to the functions.php file. I got a 500 server error and am locked out of my site. I am currently trying to access the site via FTP to restore the old functions.php file to see if this fixes it …

    • I figured it out, it actually had nothing to do with me changing function.php, there was an injection by a hacker that took the site down, it just happened to be around the same time…

  • (10>e?”0″+e:e)+”:”:””)+(10>f?”0″+f:f)+”:”+(10>g?”0″+g:g)+(c?”:”+(10>h?”0″+h:h):””)

  • thank you for guidance, I look at the javascript only 10 audio-only media, as it was not able to convert the link properly more than 10 audio, because I need the 79 media files as an archive, so this part of my change to suit my needs

    (10> e? “0” + e: e) + “”: “”) + (10> f? “0” + f: f) + “:” + (10> g? “0” + g : g) + (c? “:” + (10> h? “0” + h: h): “”)

    (90> e? “0” + e: e) + “”: “”) + (90> f? “0” + f: f) + “:” + (90> g? “0” + g : g) + (c? “:” + (90> h? “0” + h: h): “”)

    Thank you

  • I have attempted everything mentioned in this article and the media player actually doesn’t show while the above function is active. Any ideas would be greatly appreciated, thanks. 🙂

  • Hello,
    your write up seem to work except that the download button on my site didn’t link to the mp3 file rather it linked to my website home page.

    Could you help on this?

    Much appreciated.