Product:

Wonder 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 Data 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.

An online demo is as follows: