Amazing Audio Player

How to add buy now links to Amazing Audio Payer

This tutorial will guide you how to add buy now links to your website audio player created with Amazing Audio Player.

Please note, the tutorial only adds required buy now links to the audio player. Amazing Audio Player does not include a shopping cart function, it’s your own responsibility to implement it and integrate the buy now links to the shopping cart.

Step 1 – Create a website audio player with Amazing Audio Player

If it’s your first time of using Amazing Audio Player, please download the free version https://amazingaudioplayer.com/downloads/ and follow the quick start guide https://amazingaudioplayer.com/quick-start-guide/ to create an audio player.

In this tutorial, we will use the skin Darkbox and add buy now links to the playlist.

Step 2 – Customise the player skin and add buy now links

Click the button Skins from the main toolbar, in the Skins dialog, go to the Tracklist tab, and change the value of Track list item format to:

<div class='amazingaudioplayer-item-id'>%ID%</div><div class='amazingaudioplayer-item-info'><a href='%INFO%' onclick='event.stopPropagation();'>Buy Now</a></div><div class='amazingaudioplayer-item-title'>%TITLE%</div>

In the Skins dialog, Information tab, change the Info Format to:

%ARTIST% %ALBUM%

In the above text, the %ID%, %TITLE%, %INFO%, %ARTIST% and %ALBUM% are pre-defined macro variables supported by Amazing Audio Player. They will be dynamically replaced when the player is rendered.

Step 3 – Customise the player CSS

In the Skins dialog, go to the CSS tab, find the following CSS code and change the width value. This will give enough space for the “Buy Now” text.

#amazingaudioplayer-AUDIOPLAYERID .amazingaudioplayer-item-info {
  float: right;
  width: 64px;
}


Step 4 – Enter buy now link for each mp3 file

In the newly defined track list format, <a href='%INFO%' onclick='event.stopPropagation();'>Buy Now</a> defines the buy now link. The %INFO% will be dynamically replaced by the “Information” field of each mp3 file.

In this step, go to the software step 1, Add Audios dialog, click and select each mp3, enter the buy now URL to the Information input box, for example, http://www.yoursite.com/buynow/.

Here is the demo created in the tutorial: