Playing audio on the first page visit of the website

Last updated on

Product:

WonderPlugin Audio Player

Question:

I wonder is there a way to play an audio snippet 30 seconds after someone lands on any page of my website, but I would only want it to play once...not each time they go to a new page. Is that possible and would it be simple to do?

Continue reading →

WordPress Audio Player API Event

Last updated on

Product:

WonderPlugin Audio Player

Question:

I want to know how to write javascript to catch the event play and stop.

Answer:

You could use the following JavaScript code:

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.played", function(event, data) {
  console.log(event);
  console.log(data);
});

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.ended", function(event, data) {
  console.log(event);
  console.log(data);
});

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.paused", function(event, data) {
  console.log(event);
  console.log(data);
});

jQuery("#wonderpluginaudio-1").on("amazingaudioplayer.switched", function(event, data) {
  console.log(event);
  console.log(data);
});

Please change the number 1 in the above code to the ID of your player.

Add mp3 download link to audio player

Last updated on

Product:

Wonder Audio Player

Question:

How can I add download links to the player so my visitor can download the mp3 file?

Answer:

Updated on May 2020: Wonder Audio Player Version 9.6 added 6 skins to directly create audio players with download buttons and social media share buttons. Please view the following tutorial for how to use the new skins: WordPress audio player with download buttons and social media share buttons.

You can add download links to the player track list.

In the plugin, step 2 Skins dialog, please choose a skin that has a track list, then in step 3, Options tab, click the Advanced Options button, enter the following text to the Data Options field:

data-tracklistitemformat="%ID%. %TITLE% <span style='float:right;'><a href='%AUDIOURL%' class='wpaudiodownloadlink' download='%TITLE%.mp3' target='_blank' onclick='event.stopPropagation();'>Download</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.

An online demo is as follows:

Audio Player with Larger Image

Last updated on

Question:

I've downloaded the free version for testing, and I want to upgrade to the commercial version. However, before I buy, I want to know if

1. Can I change the size of the thumbnail in the Box player skin from 100x100 to something larger? I don't find this specified in your Skin CSS file, so not sure what the custom css would be.

2. If not, can the Lightbox skin show a playlist?

Thanks for your help. If I can use a larger image, I will purchase the plugin.

Answer:

All of the skins are fine tuned. If you change the size of the thumbnail in the player, you need to adjust CSS of other parts accordingly, which may be difficult.

But you can add a playlist to the Lightbox skin.

1. In the Step 3, Options tab, click Skin Options button, change the Height to Auto.
2. In the Step 3, Options tab, click Advanced Options button, then enter following text to the Advanced options:

data-showtracklist="true"

A demo is as following:

How to remove the numbers from before the track names of the Audio Player

Last updated on

Question:

So I checked out the free version of the audio player and I really like. What a great job you have done with this. Especially with the backend. It's very user friendly! I like it so much I started looking into your other plugins.

A question regarding support. I've made quite a few customizations to the CSS but there are a couple changes I would like to make but I can't seem to figure out. For example, I would like to remove the numbers from before the track names or add a little space between the number and the track name. Are these the kind of things you can help with or would I be on my own?

Another question is about your website. I love your website! Especially the way it works on mobile devices. Did you code it? Is it a wordpress site and if so what theme or framework did you start with? I just think it functions perfectly for my needs and I would be very interested in know a little more about it.

Answer:

In the player editor, Step 3, Options, click "Advanced Options", then in the right side, "Advanced options", enter:

data-tracklistitemformat="%TITLE% - %ARTIST% %DURATION%"

If you want to add back the number, it's:

data-tracklistitemformat="%ORDER%. %TITLE% - %ARTIST% %DURATION%"

We will add more options to the user interface in the future version.

Our website is based on WordPress, but it's not a commercial theme, it's coded by our developer.