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
How to load Wonder plugin JS files as non-render blocking and improve the webpage loading performance
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.
- First method: load Wonder plugin JS files in the WordPress footer
- Second method: use a third-party plugin to aggregate the JS files and load it as non-render blocking
We will also discuss plugin conditional loading at the end of this tutorial:
- Plugin conditional loading: only load plugins on selected pages or posts
How to add extra buttons to control a WordPress audio player on the same webpage
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:
- Step 1 - Create an audio player with Wonder Audio Player plugin
- Step 2 - Add buttons to control the audio player
How to add time marks to WordPress audio player
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:
- Step 1 - Create an audio player with Wonder Audio Player plugin
- Step 2 - Add time marks to the audio player
Accessible WordPress Audio Player
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?
How to add gallery shortcode to X theme Cornerstone page builder
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
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?
WordPress Audio Player API Event
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.
WonderPlugin Audio Player JavaScript API
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
