Product:
Tutorial:
This tutorial will guide you how to use the Wonder Audio Player JavaScript API to get the current song information and display it in a separate div on the same webpage.
Continue reading
Recently Asked Questions and WordPress Tutorials
Product:
Tutorial:
This tutorial will guide you how to use the Wonder Audio Player JavaScript API to get the current song information and display it in a separate div on the same webpage.
Continue reading
Product:
All Wonder Plugins
Tutorial:
By default, Wonder plugins load the plugin JS files in the WordPress header. While this provides best compatibility with all kinds of WordPress themes, JS files in the header will be render-blocking. That's, the webpage will only be rendered after the JS files are loaded.
There are two methods to load the JS files as non-render blocking and fix the issue.
We will also discuss plugin conditional loading at the end of this tutorial:
This tutorial will guide you how to add your own buttons to play/pause/rewind/fast forward a WordPress audio player created with the plugin Wonder Audio Player.
If the audio player has a playlist, the tutorial will also guide you how to add buttons to play a specific song in the playlist or switch to the previous or next song.
There are two steps in this tutorial:
This tutorial will guide you how to add time marks to a WordPress audio player created with the plugin Wonder Audio Player. When clicking on the time mark, the player will jump to the specified time and start playing.
The tutorial will also guide you how to add play, pause, rewind and forward buttons to the player.
There are two steps in this tutorial:
Product:
Question:
Accessibility is very important, but the buttons to play or pause are not seen by the screen readers. Is there any way to add the feature so the audio player is accessible for blind and vision impaired people?
Product:
WonderPlugin 3D Carousel,
WonderPlugin Audio Player,
WonderPlugin Carousel,
WonderPlugin Gallery,
WonderPlugin Portfolio Grid Gallery,
WonderPlugin Tabs,
WonderPlugin Slider
Question:
How could I add the gallery shortcode to the WordPress X theme Cornerstone page builder?
Continue reading
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?
Product:
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.
This post will show you how to use JavaScript to control the WonderPlugin Audio Player.
The following JavaScript will play the audio:
jQuery("#wonderpluginaudio-1").data("object").playAudio();
In the above code, 1 is the id of the audio player. wonderpluginaudio-1 is the id of the created player DIV.
If the id of your player is 2, you need to change the id value accordingly:
jQuery("#wonderpluginaudio-2").data("object").playAudio();
To pause the player:
jQuery("#wonderpluginaudio-1").data("object").pauseAudio();
The function audioRun(index, autoplay) will jump to the specified audio. The index starts from 0. For example, the following function will jump to the second audio and play it:
jQuery("#wonderpluginaudio-1").data("object").audioRun(1, true);
To goto the previous audio:
jQuery("#wonderpluginaudio-1").data("object").audioRun(-2, true);
To goto the next audio:
jQuery("#wonderpluginaudio-1").data("object").audioRun(-1, true);
The following four text links will play, pause, jump to the second audio and jump to the fifth audio in the following player:
<a onclick='jQuery("#wonderpluginaudio-1").data("object").playAudio();'>Click to Play</a> <a onclick='jQuery("#wonderpluginaudio-1").data("object").pauseAudio();'>Click to Pause</a> <a onclick='jQuery("#wonderpluginaudio-1").data("object").audioRun(1, true);'>Jump to Second Audio and Play</a> <a onclick='jQuery("#wonderpluginaudio-1").data("object").audioRun(4, true);'>Jump to Fifth Audio and Play</a>
The demo is as following:
Click to Play
Click to Pause
Jump to Second Audio and Play
Jump to Fifth Audio and Play