Product:

Wonder Audio Player

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.

The demo is as follows. When the songs are switched automatically or manually, the title above the player will change accordingly. The title is created with a separate div on the webpage.

There are two steps in this tutorial.

Step 1 - Add a div with a unique ID on the same webpage

In this demo, we add a div to the webpage and assign it an ID currentsong. The div will be used to display the current song title. You can use your own CSS code to style it.

Please note, the div must be on the same webpage as the audio player.

<div id="currentsong"></div>

Step 2 - Use JavaScript to retrieve and display the current song information

In Wonder Audio Player, step 3 Options tab, Advanced Options, add the following JavaScript to the Custom JavaScript input box.

(function($){
  $(document).ready(function() {
    $("#wonderpluginaudio-AUDIOPLAYERID").on("amazingaudioplayer.switched", function(event, data) {
      var elems = $(this).data("object").elemArray;
      var curr = data.current;
      var title = (curr >= 0 && curr < elems.length) ? elems[curr].title : "";
      $("#currentsong").html(title);
    });
  });
})(jQuery);