How to Add an Audio Player to Your WordPress Site With a Free Plugin

Today, we’ll explore the HTML5 Audio Player plugin which allows you to embed and play audio files on your WordPress site. In this post, we’ll go through the different aspects of this plugin and we’ll also explore how to use this plugin to embed audio players in your WordPress site.

• 
  WordPress
  
  
  15 Best WordPress Audio Player and Video Player Plugins
  
  
  Jane Baker

There are several reasons you may want to integrate an audio player on your website which can play different audio formats for your visitors—of course, if you are building a music website, it’s a must-have requirement. Also, you would like to choose easy-to-use and lightweight audio player which does the job for you.

You already know that WordPress provides a lot of plugins for almost every feature one could think of, and it can be hard to choose which one to use. And when it comes to choosing the right audio player for your WordPress site, you will find a plenty of options in the WordPress plugins store. Among them, I’ve chosen one of the best: HTML5 Audio Player.

The HTML5 Audio Player plugin allows you to play different types of audio files in integrating a simple and easy-to-use audio player. Among the different types of audio formats, it supports .mp3, .ogg and .wav out of the box. With some helpful customization options, you'll be able to create a player tailored to your needs.

For this post, I’ve used WordPress 5.2.1 and the HTML Audio Player plugin version is 1.1. I would recommend that you install it if you want to follow along with this post. To install the HTML Audio Player plugin, you need to follow the standard plugin installation process in WordPress.

In the upcoming sections, we’ll explore the basic settings of the HTML Audio Player plugin along with the setup process. Also, we’ll see how to integrate the audio player on your site for demonstration purposes. Finally, we’ll also go through a few important aspects of this plugin that allow you to customize player settings.

Why Use the HTML5 Audio Player Plugin?

The HTML5 Audio Player plugin allows you to integrate a simple, easy-to-use audio player with your WordPress website. It’s compatible with all devices and allows you to put audio players almost anywhere on your site, whether in a post, page or widget.

Additionally, it provides a lot of customization options that allow you to change the audio player controls as well as the look and feel of the player.

Let’s quickly look at the important features it provides:

• compatible with desktop, mobile, and tablet devices


• ability to configure buttons


• shortcode support


• in-line player support


• works on all major browsers


• and more

So as you can see, this plugin provides a lot of useful features that you could use while embedding the audio player on your WordPress website.

In the next section, we’ll discuss a couple of configuration screens that are important to understand if you want to use this plugin effectively.

Explore Plugin Settings

Once you install the HTML5 Audio Player plugin, it will add a link in the admin menu for your site. In this section, we’ll go through each tab of the audio player admin.

HTML5 Audio Player

This page lists all the audio players that have ben created so far in your application. Along with the title and date fields, it also displays the shortcode field which you could use in a page, post or widget to embed this player.

Apart from that, you could use the Add Audio Player link to create a new player. While creating a new player, you will be able to configure player specific settings. We’ll get back to this in the next section where we’ll create an audio player for demonstration purposes.

Add Audio Player

This is a shortcut which allows you to create a new audio player directly. Otherwise, you would have to go to the audio player listing page to create a new audio player.

In the next section, we'll explore how to actually create an audio player for your site.

Add an HTML5 Audio Player to Your WordPress Site

In this section, I’ll demonstrate how to use this plugin to embed audio players on your WordPress site. We'll add only a single player, but you could embed multiple audio players each with different settings.

Before we proceed, make sure that you’ve installed the HTML5 Audio Player plugin in your WordPress site if you want to follow along.

Go ahead and access the HTML5 Audio Player > Add Audio Player link in the left sidebar of the admin section, and it should present you the following UI to add a new audio player.

Enter the title of your audio player in the Title field.

Next, there’s the Upload audio field which allows you to upload new audios or select from already available audio files on your server. Please note that it supports .mp3, .ogg and .wav audio formats at the moment. So select the audio file which will be played in your audio player once it’s loaded.

Moving further, the Repeat field allows you to choose whether the audio will be repeated once it’s completed. There are two options you could choose from: Repeat Once and Repeat again and again. Select the appropriate option per your requirements.

Next, there’s the Muted field which allows you to mute the audio output. On the other hand, the Auto Play option allows you to play audio as soon as it’s loaded and ready.

Finally, the Player Width option allows you to specify the width of your audio player. Please note that you have to select None if you want to make the audio player responsive. I prefer this option instead of specifying fixed width since, if you specify a fixed width, it may disturb the layout of your audio player in mobile devices.

Once you have entered the necessary details, click on the Save button to create a player. As discussed earlier, you can now copy the shortcode of your player from the audio player listing page.

As you can see in the above listing page, the shortcode of your player is already available to use. Copy the shortcode and add it in the page where you want to display this audio player. I’ve created an example page, where I’ve added the audio player shortcode. Of course, you could use this code in a post or widget as well.

Let’s head over to the front-end to see how it looks:

As you can see, it displays an attractive audio player that one could use to start playing audio files. Go ahead and experiment with the different options, and let me know if you have any doubts.

So that’s how you can embed an audio player on your site using this free plugin!

The Next Step: Some Advanced Audio Players

Today, we discussed how you could integrate audio players on your WordPress website by using a free plugin. However, if you need a lot of control over the audio player UI, or need more options for file formats or playback, you'll need to step up to a premium audio player.

If you're looking for more advanced audio players that you could use right away, I recommend you visit the following post, which summarizes a few excellent scripts that are available for a low cost and which provide the utmost quality.

• 
  WordPress
  
  
  15 Best WordPress Audio Player and Video Player Plugins
  
  
  Jane Baker


• 
  WordPress
  
  
  Adding a Music Player to Your WordPress Site
  
  
  Kyle Sloka-Frey

Conclusion

In this post, we discussed how you can embed audio players by using the HTML5 Audio Player plugin in WordPress. I would love to hear from you if you want to share your experiences about other audio player plugins that you have used on your website and any that you would like to recommend.

• 
  WordPress
  
  
  20 WordPress Video Plugins and Players to Add Engagement
  
  
  Rachel McCollin

Feel free to share your thoughts and feedback using the feed below!

Also, if you want to use custom plugins but you're not comfortable tinkering with servers and prefer to have someone do it all for you, consider managed WordPress hosting. Thanks to Envato's partnership with SiteGround, you can get up to 60% off managed WordPress hosting.