Wonder Audio Player is an easy to use WordPress plugin that can help you create mp3 players for your WordPress sites.
To create a WordPress audio player, in the plugin, step 1, you can add mp3 files to the playlist, the plugin will build the player and provide you with the shortcode. You can then add the player shortcode to a WordPress post or page.
In some cases, for example, you have tens or even hundreds of mp3 files, instead of creating a player for each mp3 file, you may want to only create one player and reuse the same player for all mp3 files.
This tutorial will guide you how to create a player, then reuse it for all other mp3 files.
There are two steps in this tutorial:
- Step 1 - Create a WordPress audio player
- Step 2 - Add mp3 URL in the shortcode
At the end of the tutorial, it will also discuss how to disable preloading mp3 files on page load. This is useful if there are tens or even hundreds of players on the same webpage.
Step 1 - Create a WordPress audio player
After the player is created, the plugin will provide you with a shortcode, for example:
Step 2 - Add mp3 URL in the shortcode
To add an mp3 URL to the player, you only need to use a data attribute
data-mp3 to specify the mp3 URL. Please note, you need to use absolute URL for the mp3. If your WordPress uses
https:// secure protocol, the mp3 URL must also start with
https:// secure protocol.
The example is as follows:
[wonderplugin_audio id="64" data-mp3="https://www.wonderplugin.com/media/prideandprejudice_01.mp3"] [wonderplugin_audio id="64" data-mp3="https://www.wonderplugin.com/media/prideandprejudice_02.mp3"] [wonderplugin_audio id="64" data-mp3="https://www.wonderplugin.com/media/prideandprejudice_03.mp3"]
Pride and Prejudice Chapter 1
Pride and Prejudice Chapter 2
Pride and Prejudice Chapter 3
By default, Wonder Audio Player will preload the first mp3 in the player playlist on page load. If there are tens or even hundreds of players on the same webpage, you may want to disable the preloading.
To disable the preloading, edit the player, in step 3 Options tab, Skin Options, uncheck the option "Play mode" => "Preload audio on page load".