How to add an mp3 download link under a bar audio player

Product:

WonderPlugin Audio Player

Tutorial:

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

For how to add an mp3 download link inside the bar player, please view https://www.wonderplugin.com/wordpress-audio-player-tutorial/how-to-add-an-mp3-download-link-in-the-wordpress-audio-bar-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

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

#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-text {
    position: absolute !important;
    height: auto !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    padding: 12px !important;
}

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

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

An online demo is as follows: