MP3 Audio Player with Playlist for WPBakery Page Builder

Last updated on

WPBakery Page Builder is one of the most popular WordPress drag and drop page builders. This tutorial will guide you how to add an audio player with playlist to WPBakery Page Builder.

There are four steps in this tutorial:

  • Step 1 - Download and install Wonder Audio Player plugin
  • Step 2 - Create an audio player with playlist in Wonder Audio Player
  • Step 3 - Add the player shortcode to WPBakery Page Builder
  • Step 4 - Save and publish the post or page, test the player in the published post/page.

Step 1 - Download and install Wonder Audio Player plugin

First please install the WordPress premium plugin Wonder Audio Player. You can download the free trial version from the plugin home page, test it, make sure it works for you before upgrading to the commercial version. The trial version has a limit of three audios in one player, the commercial version will remove the limit.

Step 2 - Create an audio player with playlist in Wonder Audio Player

After you have installed the plugin Wonder Audio Player, in your WordPress backend, left menu, go to Wonder Audio Player -> New Audio Player, create a new player.

In the plugin, Step 1 MP3 tab, click the Add Audio button to add your mp3 files.

wordpress mp3 player

In Step 2 Skins tab, select a skin that has a playlist.

wordpress audio player playlist

Save and publish the player, the plugin will create the player and display its shortcode.

wordpress audio player shortcode

Step 3 - Add the player shortcode to WPBakery Page Builder

In WPBakery Page Builder, add a Text Block element.

wpbakery text block

Edit the Text Block, add the player shortcode.

wpbakery add shortcode

Step 4 - Save and publish the post or page, test the player in the published post/page.

The shortcode will not work in the page builder editor. To test the player, publish or update the page, then test the player in the final webpage.