Information Field Hidden in Darkbox Skin

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;
}

Playing a Specific Track

Question:

Basically, I want to know if I'm able to send someone to the page the player is on but have the player playing a specific track rather than default to the first track.

For example, my customer is reading an article and there's a link that asks them to "click here" to hear the interview. When they click I want to send them to the separate page where my player is but I want it to automatically play track 12.

Is there easy code to accomplish this?

Answer:

The following answer only works for Version 3.0 and above.

The player created with Version 3.0 and above supports two URL parameters firstaudioid and autoplayaudio. You can use the parameter to specify an audio to start.

The id of first video is 0. For example, the following URL will start playing the third audio.

https://amazingaudioplayer.com/examples/html5-mp3-player-with-playlist-id5/?firstaudioid=2&autoplayaudio=1

How to add download links in Amazing Audio Player

This tutorial will guide you how to add download links in Amazing Audio Player, so your visitor can directly download the mp3 files from the audio player.

This tutorial is for Amazing Audio Player Version 2.6 and above.

Step1 - Create Audio Player in Amazing Audio Player

If it's your first time to use Amazing Audio Player, please view https://amazingaudioplayer.com/quick-start-guide/ for a quick start.

In this tutorial, we are going to use the skin DarkBox and add download links to the playlist.

Step 2 - Customise the Player skin and add download links

In Amazing Audio Player, step 2, Skins dialog, Tracklist tab, change the value of Track list item format to the following text:

%ID%. %TITLE% <span style='position:absolute;top:0;right:0;'><a href='%AUDIOURL%' download='%TITLE%.mp3' target='_blank'>Right Click to Save</a></span>

In the above code, %ID%, %TITLE% and %AUDIOURL% are predefined macro variables. They will be replaced by each audio id, title and audio URL dynamically.

Please note. The download attribute only works for Chrome 14.0 and above, Firefox 20.0 and above, Opera 15.0 and above. On other web browsers, if you directly click the link, instead of downloading the mp3 file, these web browsers will open and play the mp3.  There is no way to change the behaviour of these web browsers, unless you use some server side script, for example PHP, to dynamically modify the Content-Type of the HTTP header.

To download the mp3 files, you need to ask your users to right click the link and select Save Link As from the popup menu.

Play/pause audio player inside an iframe

Question:

Your text link in the post Play/pause Audio Player with API worked great with full list of songs on the page. However, when we tried it with the iframe on the page, it did not start the player. Any idea how to make the text link work with the iframe? The iframe approach is a much simpler structure for us.

Answer:

When adding the iframe, assign an id for it, for example:

<iframe src="audioplayer.html" id="amazing" width="274" height="52" border="0" scrolling="no" frameBorder="0"></iframe>

Then you can use the following text link:

<a href="javascript:if (window.frames['amazing'].contentWindow) window.frames['amazing'].contentWindow.amazingAudioPlayerObjects.objects[0].playAudio(); else window.frames['amazing'].window.amazingAudioPlayerObjects.objects[0].playAudio();">Click to Play</a>
<a href="javascript:if (window.frames['amazing'].contentWindow) window.frames['amazing'].contentWindow.amazingAudioPlayerObjects.objects[0].pauseAudio(); else window.frames['amazing'].window.amazingAudioPlayerObjects.objects[0].pauseAudio();">Click to Pause</a>

Add audio player to Adobe Muse

Question:

Greetings. I am trying out your product before I buy it, and I was able to go through the steps easily. However, I seem unable to place the player on a page in Muse, or successfully insert the code. Do you have any recommendations?

Answer:

You can view the following tutorial and use an iframe to insert the player to Adobe Muse:

https://amazingaudioplayer.com/how-to-insert-an-html5-audio-player-to-your-webpage-with-iframe/

Play and Pause Audio Player with API

Question:

Hi Support:

I have purchased your Amazing Audio Player commercial version.

Is it possible to create a text link on a given page that will effect a play/pause action in the Amazing Audio Player on that page?

Thank you for any information you can provide on this matter.

Answer:

You can call the following JavaScript function to play/pause the player:

amazingAudioPlayerObjects.objects[0].playAudio();
amazingAudioPlayerObjects.objects[0].pauseAudio();

You can call the following JavaScript function to goto the second and fifth song and play:

amazingAudioPlayerObjects.objects[0].audioRun(1, true);
amazingAudioPlayerObjects.objects[0].audioRun(4, true);

The amazingAudioPlayerObjects is a global object created by the player.

For example, the following two text links will play/pause the audio player:

<a href="javascript:amazingAudioPlayerObjects.objects[0].playAudio();">Click to Play</a>
<a href="javascript:amazingAudioPlayerObjects.objects[0].pauseAudio();">Click to Pause</a>

The following two text links will play the second and fifth song:

<a href="javascript:amazingAudioPlayerObjects.objects[0].audioRun(1, true);">Click to Play</a>
<a href="javascript:amazingAudioPlayerObjects.objects[0].audioRun(4, true);">Click to Pause</a>

A demo is as following:

Click to Play

Click to Pause

Play the second song

Play the fifth song

Autostart on Android and IOS

Question:

I was evaluating and hoping that the amazingaudioplayer would be a solution to the simple requirement that I have.

I want an AutoPlay mp3 song to be played as background music on a html page, and provide a button
to pause/play the music. This should work on major browsers, also on mobile devices.

It does work on desktop browsers on Windows and Mac, but the AutoPlay function does not work on Android 4.3 (galaxy s4), and it does not work on IOS 6 safari. (Ipod touch). The button does shows correctly in play mode (shows the pause button), but no music is playing.

Apparently this is because Android and IOS require human interaction and forbid autoplay.

Any help is sincerely appreciated.

Answer:

Audio/video autoplay is not allowed on iPhone, iPad and Android. It's a limit from the device, and there is no way to bypass it.