How to play different mp3 files by passing a URL parameter

Posted on by

If your web server supports a server-side script, for example PHP, you can pass a URL parameter to the player webpage, then play different mp3 files according to the URL parameter.

This is useful when you use iframe to add players to a webpage and you want to use the same player to play different mp3 files.
Continue reading →

How to add an audio player and a slideshow to the same webpage

Posted on by

This tutorial will show you how to add an audio player created with Amazing Audio Player and a slideshow created with Amazing Slider to the same webpage.

There are three steps in this tutorial:

  • Step 1 – Create an audio player and a slideshow, copy or upload the generated files to the web folder
  • Step 2 – Add HTML code to head section
  • Step 3 – Add HTML code to body section

Continue reading →

How to add an audio player to Squarespace website

Posted on by

Squarespace is an online website builder that enables you to create and maintain websites and blogs. This tutorial will guide you how to add an audio player created with Amazing Audio Player to your Squarespace website. You can create an audio player with playlist, a single button audio player or a bar audio player.

There are three steps in this tutorial:

  • Step 1 – Create an audio player
  • Step 2 – Upload player files to Squarespace
  • Step 3 – Embed the player to a Squarespace page

Continue reading →

How to add a button to shuffle the playlist of the audio player?

Posted on by

This tutorial will show you how to add a button to shuffle the playlist of the audio player.

Step 1 – In your webpage, add the following HTML code to create a button. You could use your own CSS to add style to the button.

<button id="shuffle-player">Shuffle</button>

Step 2 – In your webpage, add the following JavaScript to your webpage, just before the head closing tag </head>.

In the code, line 6, if your player has a different ID, please change the value accordingly.

<script>
(function($) {
	$("document").ready(function() {
		$("#shuffle-player").click(function() {
		
			var playerID = 1;
			var instance = $("#amazingaudioplayer-" + playerID).data("object");	
			
			for (var i = instance.elemLength - 1; i > 0; i--)
			{
				if ((i == 1) && (Math.random() < 0.5))
					break;
						
				var index = Math.floor(Math.random() * i);
				
				var temp = instance.elemArray[index];
				instance.elemArray[index] = instance.elemArray[i];
				instance.elemArray[i] = temp;
								
				temp = instance.playerSkin.trackitems[index];
				instance.playerSkin.trackitems[index] = instance.playerSkin.trackitems[i];
				instance.playerSkin.trackitems[i] = temp;
				
				var tracks = $("#amazingaudioplayer-" + playerID + " .amazingaudioplayer-track-item");
				var track0 = tracks.eq(index);
				var track1 =  tracks.eq(i);			
				track0.insertBefore(track1);
				
				tracks = $("#amazingaudioplayer-" + playerID + " .amazingaudioplayer-track-item");
				track1.insertBefore(tracks.eq(index));
			}
					
			for (var i = 0; i< instance.elemLength; i++)
				instance.elemArray[i].id = i + 1;
			
			$("#amazingaudioplayer-" + playerID + " .amazingaudioplayer-track-item").each(function(i) {
				$(this).data("order", i);
				if ($(this).hasClass("amazingaudioplayer-track-item-active"))
					instance.currentItem = i;
				$(".amazingaudioplayer-item-id", this).text(i + 1);
			});
			
		});
	});
})(jQuery);
</script>

Information Field Hidden in Darkbox Skin

Posted on by

Question:

I have a question about the “Darkbox” skin. The “Information” field is hidden by the play, forward and rewind buttons (see the attached pic). How can that be solved?

Answer:

In step 2, Skins dialog, CSS tab, find the following CSS code:

#amazingaudioplayer-AUDIOPLAYERID .amazingaudioplayer-text {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 4px;
    height: 42px;
}

And you can change the height value to make it larger:

#amazingaudioplayer-AUDIOPLAYERID .amazingaudioplayer-text {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 4px;
    height: 60px;
}