Add HTML5 audio player to shopify

Question:

Love your player!  Just struggling to implement the audio player into my Shopify site. I have followed the tutorial: https://amazingaudioplayer.com/how-to-add-an-audio-player-to-shopify/.

Answer:

In the tutorial, step 2, you need to upload the files to the Public folder of your Dropbox.

Public folder is special folder in your Dropbox space, you can view the tutorial: https://www.dropbox.com/help/16/en.  New Dropbox account does not have a default Public folder, you can follow the instructions in the above link to create one.

 

How to change the size of skin Darkbox to a smaller value

Question:

How to change the size of skin Darkbox to a smaller value

Answer:

The default width of skin Darkbox is 320px. The following steps will change the width to 300px:

1. In Skins dialog, Overview tab, Size and play mode, change the width to 300

2. In Information tab, change the  image width and height to 80/80

3. In Tracklist tab, change the track list width to 300.

How to add the audio player to Shopify

Question:

How to add the audio player to Shopify

Answer:

You can view the tutorial here: https://amazingaudioplayer.com/how-to-add-an-audio-player-to-shopify/

The basic idea is, you need to upload the created audio player files to a web hosting, then use an iframe to insert the player to your Shopify webpage.

If you have you own web hosting, you can upload the files to your own web server. Otherwise, you can use the free web hosting provided by DropBox.

Multiple audio players on web page

Question:

I am interested in your audio player, for my music website, i have several albums, so can i copy the audio player on my webpage, so each of my albums are distinctive, or all the music have to be on the one audio player , and how many songs can i list in the audio player.

Answer:

Both methods will work.

You can add all of your audios to one player, or you can use multiple players and add them to one webpage:  http://amazingaudioplayer.com/how-to-add-multiple-html5-audio-players-to-one-webpage/.  There is not a limit of how many songs can be listed in one audio player.

Amazing Audio Player Events

Question:

I purchased a license  of your Amazing Audio Player and am wondering if i can fire off an ajax call at the end of the mp3 or on a timer during playing of the track.

Answer:

You can use the following code snippet to bind the event when an audio track ends, then in the function, you can fire off your ajax call.

<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
   $("#amazingaudioplayer-1").bind("amazingaudioplayer.ended", function(event, index){ 
     console.log(index);
   });
});
</script>

The amazingaudioplayer-1 in the code is the id of the player div. If you have selected a different ID in the publish dialog, you need to change the number accordingly.

Single play pause button audio player?

Question:

The Amazing Audio Player is almost what I need. The one missing element is a single play pause button that is sizable.

Answer:

A single play/pause button audio player will come as a new “skin” in Amazing Audio Player next version.

Currently, for the “Bar” skin, if you hide all other buttons, change the width of the player, it will be a “single button” player.