How to add extra buttons to control a WordPress audio player on the same webpage

Last updated on

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

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.