WordPress Audio Player for Elementor

Elementor is one of the most popular WordPress editors. This tutorial will guide you how to add a WordPress audio player to the Elementor. You can create a single button audio player, audio player bar, or audio player with playlist.

A created WordPress audio player demo is as follows (this page is not built with Elementor, but it will have the same effect). You can view the page for more examples: WordPress Audio Player Examples.

There are 2 steps in this tutorial:

  • Step 1 - Install Wonder Audio Player and Create a WordPress audio player
  • Step 2 - Add the audio player shortcode to Elementor

Step 1 - Install Wonder Audio Player and Create a WordPress audio player

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.

After you install the plugin, you can view this post for how to create an audio player: Wonder Audio Player Quick Start Guide. You can also view the quick start video:

How to create a WordPress audio player

Step 2 - Add the audio player shortcode to Elementor

After you create the WordPress audio player, the plugin will provide the audio player shortcode.

wordpress-audio-player-shortcode

To add the audio player to Elementor, in Elementor editor, add a Shortcode element, then enter the shortcode.

To test the audio player, save the page then view the final web page.

elementor-audio-player-shortcode-1

elementor-audio-player-shortcode-2

You can also add a Text Editor element and add the WordPress audio player shortcode.

elementor-audio-player-text-1

elementor-audio-player-text-2