Playing audio on the first page visit of the website

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

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.stop", 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

Product:

WonderPlugin Audio Player

Question:

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

Answer:

You can add download link of each audio file to the tracklist.

In step 3, Options tab, click the Advanced Options button, then enter the following text to the Advanced Options field:

data-tracklistitemformat="%ID%. %TITLE% <span style='position:absolute;top:0;right:0;'><a href='%AUDIOURL%' class='wpaudiodownloadlink' 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.

This is the default behaviour of these web browsers, and there is no way to change that, unless you use some server side script to dynamically modify the HTTP header.

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

Audio Player with Download Link

On web browsers other than Chrome, Firefox and Opera, left clicking the link will play the mp3 file. To avoid confusing the visitors, you can add the following JavaScript to the header.php of your WordPress theme, just before the head closing tag </head>. The script will disable left click on the link except for Chrome, Firefox and Opera.

<script>
jQuery(document).ready(function() {
  jQuery(".wpaudiodownloadlink").click(function() {
    var isChrome = (navigator.userAgent.match(/Chrome/i) != null);
    var isFirefox = (navigator.userAgent.match(/Firefox/i) != null);
    var isOpera = (navigator.userAgent.match(/Opera/i) != null);
    if (isChrome || isFirefox || isOpera)
      return true;
    else
      return false;
  });
});
</script>

Audio Player with Larger Image

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

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.