Product
Tutorial
This tutorial will guide you how to change the information shown on the page depends on which audio is currently playing in the audio player.
There are two steps in this tutorial.
Step 1 - Add all audio information to the page, wrap the information of each audio inside a div, assign a CSS class name for all divs and a unique ID for each div.
If you are using a drag and drop page editor, you do not need to wrap the content in the extra div, just assign the class name and ID to the corresponding module.
Please note, a CSS class name can be assigned to multiple elements, but the ID must be unique for each element.
The demo HTML code is as follows. In the code, the ID has a format like wonderaudioplayer-info-0, wonderaudioplayer-info-1. Please make sure the number in the ID matches the order of each audio. The number starts from 0.
<div class="wonderaudioplayer-info" id="wonderaudioplayer-info-0"> This content will show up for the first audio. </div> <div class="wonderaudioplayer-info" id="wonderaudioplayer-info-1"> This content will show up for the second audio. </div> <div class="wonderaudioplayer-info" id="wonderaudioplayer-info-2"> This content will show up for the third audio. </div> <div class="wonderaudioplayer-info" id="wonderaudioplayer-info-3"> This content will show up for the fourth audio. </div>
Step 2 - Add CSS and JavaScript code in Wonder Audio Player
In Wonder Audio Player, edit the player, in step 3 Options tab, Advanced Options, add the following code to the Custom CSS input box. The CSS code will hide all of the contents by default.
.wonderaudioplayer-info {
display: none;
}
Add the following code to the step 3 Options tab, Advanced Options, Custom JavaScript input box. The code will show the content depending on the current playing audio.
(function($) {
$(document).ready(function() {
$("#wonderpluginaudio-AUDIOPLAYERID").on("amazingaudioplayer.switched", function(event, data) {
$(".wonderaudioplayer-info").css("display", "none");
$("#wonderaudioplayer-info-" + data.current).css("display", "block");
});
});
})(jQuery);
An online demo is as follows:
