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 with inline JavaScript to control the audio player
• Optional - Use custom JavaScript to control the audio player

A created demo is as follows:

Step 1 - Create an audio player with Wonder Audio Player plugin

Wonder Audio Player is a WordPress plugin that helps you create responsive HTML5 audio player for your WordPress websites. It is compatible with popular WordPress page builders or editors, for example, WordPress Classic Editor, WordPress Block Editor, WPBakery Page Builder, Elementor, Divi Builder, SiteOrigin Page Builder, Beaver Builder etc.

You can view the following document for how to create an audio player: Wonder Audio Player Help Document.

You can also view the quick start YouTube video: How to create a WordPress audio player.

Step 2 - Add buttons to control the audio player

After you create an audio player, you can add the following code to your webpage to create a play button. You can place the code anywhere on the same webpage as the player.

<a href="#" onclick="jQuery('#wonderpluginaudio-55').data('object').playAudio();return false;"><button>Play</button></a> 

In the above code snippet, make sure to change the number 55 in the code wonderpluginaudio-55 to the ID of your own Wonder audio player.

You can add the following code to pause the player:

<a href="#" onclick="jQuery('#wonderpluginaudio-55').data('object').pauseAudio();return false;"><button>Pause</button></a> 

You can add the following code to rewind or forward the playing:

<a href="#" onclick="jQuery('#wonderpluginaudio-55').data('object').forward(10);return false;"><button>Forward 10 Seconds</button></a>

<a href="#" onclick="jQuery('#wonderpluginaudio-55').data('object').rewind(10);return false;"><button>Rewind 10 Seconds</button></a> 

You can add the following code to switch to the previous or next song:

<a href="#" onclick="jQuery('#wonderpluginaudio-55').data('object').audioRun(-2,true);return false;"><button>Play Previous</button></a>

<a href="#" onclick="jQuery('#wonderpluginaudio-55').data('object').audioRun(-1,true);return false;"><button>Play Next</button></a> 

To play a specific song in the playlist, use the following code:

<a href="#" onclick="jQuery('#wonderpluginaudio-55').data('object').audioRun(2,true);return false;"><button>Play 3rd Song</button></a>

The above code uses the number in the function call audioRun(2,true) to specify the song ID. The ID starts from 0, so 2 means it will play the 3rd song.

Optional - Use custom JavaScript to control the audio player

In some situations, your WordPress editor may remove inline JavaScript from the button code, causing the button not to function as expected. For instance, if you insert the following code:

<a href="#" onclick="jQuery('#wonderpluginaudio-55').data('object').playAudio();return false;"><button>Play</button></a>

After saving and publishing the page, if you check the HTML source code in your web browser, it might appear like this:

<a href="#"><button>Play</button></a>

The inline onclick event JavaScript is automatically removed by the WordPress editor, resulting in the button not working as intended.

In such a scenario, you can opt to use custom JavaScript to control the player.

Firstly, add the button HTML code to the editor, making sure to assign a unique ID for each button:

<a href="#" id="wonderpluginaudio-73-play"><button>Play</button></a>
<a href="#" id="wonderpluginaudio-73-pause"><button>Pause</button></a>
<a href="#" id="wonderpluginaudio-73-forward"><button>Forward 10 Seconds</button></a>
<a href="#" id="wonderpluginaudio-73-rewind"><button>Rewind 10 Seconds</button></a>
<a href="#" id="wonderpluginaudio-73-play-previous"><button>Play previous</button></a>
<a href="#" id="wonderpluginaudio-73-play-next"><button>Play next</button></a> 

Next, in Wonder Audio Player, edit the player. Navigate to step 3, Options tab, and then Advanced Options. Add the following code to the Custom JavaScript input box:

(function($){
  $(document).ready(function() {
  
    $("#wonderpluginaudio-73-play").click(function() {
      $('#wonderpluginaudio-73').data('object').playAudio();
      return false;
    });

    $("#wonderpluginaudio-73-pause").click(function() {
      $('#wonderpluginaudio-73').data('object').pauseAudio();
      return false;
    });

    $("#wonderpluginaudio-73-forward").click(function() {
      $('#wonderpluginaudio-73').data('object').forward(10);
      return false;
    });

    $("#wonderpluginaudio-73-rewind").click(function() {
      $('#wonderpluginaudio-73').data('object').rewind(10);
      return false;
    });

    $("#wonderpluginaudio-73-play-previous").click(function() {
      $('#wonderpluginaudio-73').data('object').audioRun(-2, true);
      return false;
    });

    $("#wonderpluginaudio-73-play-next").click(function() {
      $('#wonderpluginaudio-73').data('object').audioRun(-1, true);
      return false;
    });
  });
})(jQuery);

In the above button HTML code and JavaScript code, 73 represents the ID of the audio player. Make sure to change it to match the ID of your own player.

The created demo is as follows: