Add mp3 download link to audio player

Product:

WonderPlugin Audio Player

Question:

How can I add download links to the player so my visitor can download the mp3 file?

Answer:

You can add download link of each audio file to the tracklist.

In step 3, Options tab, click the Advanced Options button, then enter the following text to the Advanced Options field:

data-tracklistitemformat="%ID%. %TITLE% <span style='position:absolute;top:0;right:0;'><a href='%AUDIOURL%' class='wpaudiodownloadlink' download='%TITLE%.mp3' target='_blank'>Right Click to Save</a></span>"

In the above code, %ID%, %TITLE% and %AUDIOURL% are predefined macro variables. They will be replaced by each audio id, title and audio URL dynamically.

Please note. The download attribute only works for Chrome 14.0 and above, Firefox 20.0 and above, Opera 15.0 and above. On other web browsers, if you directly click the link, instead of downloading the mp3 file, these web browsers will open and play the mp3.

This is the default behaviour of these web browsers, and there is no way to change that, unless you use some server side script to dynamically modify the HTTP header.

To download the mp3 file, you need to ask your users to right click on the link, and select Save Link As from the context menu.

Audio Player with Download Link

On web browsers other than Chrome, Firefox and Opera, left clicking the link will play the mp3 file. To avoid confusing the visitors, you can add the following JavaScript to the header.php of your WordPress theme, just before the head closing tag </head>. The script will disable left click on the link except for Chrome, Firefox and Opera.

<script>
jQuery(document).ready(function() {
  jQuery(".wpaudiodownloadlink").click(function() {
    var isChrome = (navigator.userAgent.match(/Chrome/i) != null);
    var isFirefox = (navigator.userAgent.match(/Firefox/i) != null);
    var isOpera = (navigator.userAgent.match(/Opera/i) != null);
    if (isChrome || isFirefox || isOpera)
      return true;
    else
      return false;
  });
});
</script>