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 Advanced Options input box:

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

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.