How to add an mp3 download link in the WordPress audio bar player

Product:

WonderPlugin Audio Player Version 6.5 or above

Tutorial:

This tutorial will guide you how to add an mp3 download link in the bar audio player.

For how to add a download link underneath the audio player, please view the tutorial: https://www.wonderplugin.com/wordpress-audio-player-tutorial/how-to-add-an-mp3-download-link-to-a-bar-audio-player/

For how to add the download link to the player track list, please view the tutorial: https://www.wonderplugin.com/wordpress-audio-player-tutorial/add-mp3-download-link-to-audio-player/.

Step 1 - Select a bar skin in the plugin

In WonderPlugin Audio Player, step 1, add your mp3 files, then in step 2 Skins dialog, select a bar skin, for example, Bar, "White Bar", "Bar with Title" or "White Bar with Title".

Step 2 - Customise the player

1. In the plugin, step 3 Options tab, Advanced Options, enter the following text to the Custom CSS input box:

#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-bar-info {
	position: relative;
	float: right;
	color: #eee;
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	line-height: 24px;
	margin: 0 8px;
}

#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-bar-info a {
	color: #eee;
	text-decoration: none;
}

2. In step 3 Options tab, Advanced Options, enter the following text to the Advanced Options input box:

data-showinfoinbar="true"
data-infoinbarformat="<a href='%AUDIOURL%' class='wpaudiodownloadlink' download='%TITLE%.mp3' target='_blank' onclick='event.stopPropagation();'>Download</a>"

3. In step 3 Options tab, Skin Options, add 100 to the option width. This will give some extra space for the download link. For example, if you have selected the skin "Bar", the default width is 300, you can change the value to 400.

Please note, HTML download attribute does not work in Safari at the moment. In Safari, if you directly click the link, instead of downloading the mp3 file, it will open and play the mp3.

To download the mp3 file, please ask your users to right click on the link in Safari, and select "Download Linked File" from the context menu.