How to Use and Customize WordPress Audio Player?

How to Use and Customize WordPress Audio Player?

How to Use and Customize WordPress Audio Player? (HR)
By all accounts, an audio player is the perfect destination for musicians hoping to sell music online, storytellers looking to share stories in a novel way and podcasters going to engage audiences in interesting topics. Have you ever wanted to add an audio player in WordPress to broadcast your own works to the world?

If this is the case, we are more than willing to showcase the simple steps to enable and customize an audio player on your WordPress site. Instead of introducing you to hardcoded HTML5 audio, we prefer to show how you can create a nice-looking player by the use of a WordPress plugin named as Compact WP Audio Player.

About Compact WP Audio Player

As a Flash hybrid based solution, Compact WP Audio Player makes it a breeze to embed both the .ogg and .mp3 versions of audio files within any of your WordPress posts/pages. Besides that, this cute plugin works well with all major mobile devices like iPad, iPhone and Android, and it is also fully compatible with the most popular browsers, such as IE9/8/7, Firefox, Chrome and Safari, etc.

More importantly, this multi-purpose Compact WP Audio Player plugin empowers you to sell audio files and podcast online with little effort. The built-in auto-play option is set to play a mp3 and audio files as soon as your page loads. Note that, its newest version is 1.9, which is available for free download through the website URL as below.

Website URL: https://wordpress.org/plugins/compact-wp-audio-player/

WordPress Audio Player - About Compact WP Audio Player

Install & Activate this Plugin

First and foremost, you are expected to “Install” and “Activate” the Compact WP Audio Player in your WordPress site. To do that, you can refer to this plugin installation tutorial to enable this plugin from both WordPress dashboard and a FTP client. Upon activation, this newly-added plugin will be stored as one of the “Installed Plugins” as below.

WordPress Audio Player - Install & Activate this Plugin

Embed an Audio Player to Your Posts/Pages

To do so, you can simply add a new post by navigating to “Posts” > “Add New”. And then, fill in your post title and body before adding a shore line of configuration code as below.

[sc_embed_player fileurl="{URL}"] 

The example of how your embedded code looks like below,

WordPress Audio Player - Embed Code Example

Note: The most hassle-free way to upload your own audio files is to use the “Media Uploader” of WordPress. Once you’ve uploaded an audio file through “Media Uploader”, you will get the above-mentioned file URL.

Make Additional Configurations

Apart from that, this Compact WP Audio Player plugin is also included with additional usages. In the following, there are some significant features for your reference. Note that, there is a video tutorial released by the developers of this plugin through this link.

Use Auto-Play Option
As above, you have the ability to play a mp3/audio file when the page loads by copying a line of “auto-play” parameter. Here is an example configuration code with auto-play option.

[sc_embed_player fileurl="{File URL}" autoplay="true"]

Note: As Apple prevents auto-play on its devices, you cannot do auto-play on your iPhone, iPad and many other IOS devices.

Set Volume
In the meantime, you are allowed to adjust the volume level for your audio files by the use of “volume” parameter. As a matter of course, you can make use of a value in the range of 0 to 100 for your volume level.

[sc_embed_player fileurl="{File URL}" volume="60"]

Loop the Sound
Additionally, you can also reset the playback to the very beginning as soon as the audio file is done playing by using the “looping” parameter.

[sc_embed_player fileurl="{File URL}" loops="true"]

Specify OGG and MP3 Files
And more, this Compact WP Audio Player plugin also makes it possible for you to specify both the .mp3 and .ogg file versions for your own audio. Pay attention that, the “|” character is used to separate the file URLs/paths for each of your audio files. And this plugin would automatically choose the supported file to play, depending on users’ device.

[sc_embed_player loops="true" fileurl="{File URL}.mp3|{File URL}.ogg"]

Add Text Around Your Audio Player
In some cases you want to add text around your audio player, you may take the following shortcode for a preference. Note that, this code only applies to the “Text” editor of the posts/pages.

 

My Audio Player:

[sc_embed_player fileurl="{File URL}"]

Important to Note: If you only want to play audio on the WordPress homepage, you can copy the below example code to your footer.php or header.php file. Beware that, this shortcode comes with auto-play option.

<?php 
if(is_front_page()){
echo do_shortcode('[sc_embed_player fileurl="{URL}" autoplay="true"]'); 
}
?>

Disable Simultaneous Playback Functionality
If you only wish one audio file to be performed at a time when there are multiple files on the same page, you will need to disable the playback functionality by going to “Settings” > “SC Audio Player.” As you may suspect, all you need to do is check this box next to the “Disable Simultaneous Play” option.

WordPress Audio Player - Disable Simultaneous Playback Functionality

By doing so, you can also make sure that the sound will stop once your current audio file is finished without user input. Do not forget to make a hit on this “Update” button to take effect.

Top-Rated WordPress Audio Player Plugins

In addition to the Compact WP Audio Player plugin, there are a wealth of audio player plugins for different purposes. Here are the top-rated solutions which have overwhelming recognitions with people outside of the technical market.

  • HTML5 MP3 Player with Playlist Free – that enables you to use a set of HTML5 codes to enable audio playback inside all major web browsers, including Chorme, IE, Firefox, Safari and Opera, etc. In the further, this highly-customizable plugin comes with various options, such as Playlist, Volume Control, Next, Repeat, Stream Seek, Play-Cause and much more.
  • HTML jQuery Audio Player – that enables you to set up a full playlist or one single audio track on your WordPress website. Besides that, you can also specify the player color, and in the meantime, display album cover, ratings and download/buy link, etc.
  • CP Media Player – that enables you to embed video files and many other audio files anywhere, including MP3, MP4, WMV, WebM, OGG, WAV, WebSRT and WMA, etc. More than that, you are empowered to associate a playlist to your own media player and define the looks to fit your blog design as possible.