How to Embed an HTML5 Audio Player On WordPress Page?

Long gone is the time when music was considered the most ridiculed thing in a web design. But now, hundreds of thousands sites can be seen embedding videos in a bid to attract traffic.

Adding a video or audio not just help in making a web page interesting to users, but are increasingly becoming a vital search ranking factor. In case, you’re running a WordPress website, then adding an audio player will help play music in the background or any other place on your site, as you deem perfect.

Unfortunately, not many WordPress users are aware of the process of adding music player in a WP page. Through this post, I’ll help you understand how you can embed music player within a WordPress page. But, let us first have a look at some of the advantages of adding audio files in your site.

Why You Need an Audio Player Anyways?

It’s obvious that as a musician, you will certainly need to show some of your music samples to clients, to help them know how great your music is. And, having a music player will play all your audio files, making your music or the instructions to play the music a lot more understandable.

When running a business site that sells products and/or services, it is a good idea to include videos that you can put on YouTube of your client interviews. This will strengthen the trust of users on your brand.

Often, people find written instructions on a site bland and boring. If that’s the case, then they might not even bother reading the text at the first place. But, embedding a video helps in presenting the instructions in a highly interactive and engaging manner.

Ways to Embed HTML5 Audio Player in a WordPress Page

There are two different ways using which, you can embed an audio player on your WordPress website page, such as:

1. Use an HTML5 Player to Upload Audio Files: This is the easiest way to embed a music player on a WordPress page. But, there is a problem with using an HTML audio player that it works in a different way for separate WordPress installations, plugin and themes.

Despite of this issue, you must still give the HTML5 audio player a try. When it comes to using an HTML5 player, the first thing that you need to do is to host your audio file on a cloud-based hosting solution such as Amazon S3 or others. Or else, you could simply upload the audio files via the WordPress Media Library; the process is similar to adding an image in a page or post as shown in the following steps:

Step 1 – Add a page/post or edit some existing one.

Step 2 – Bring your cursor in the content where you want to display the player. And then, click on the “Add Media” button above the content editor.

Step 3 – A popup will appear on your content editor screen. Simply, hit the Upload Files button, and choose the audio file you want to embed.

Step 4 – Ensure that your uploaded audio file is selected under the Attachment Display Settings, and then set the Embed or Link option to “Embed Media Player”, as follows:

Step 5 – Simply click on “Save Changes”.

Step 6 – Lastly, use the new HTML5

<audio controls=”controls”>

<source src=”audio.ogg” type=”audio/ogg” />

<source src=”audio.mp3″ type=”audio/mp3″ />

</audio>

2. Use Plugins to Embed Audio Player: This is indeed the most obvious way to fulfill your goal. There are many different plugins available in the Plugin directory that can make the process of embedding audio player in WordPress a hassle-free task. Here’s a list of some of the best plugins that you must consider for adding music player:

• WordPress Built in Player: This plugin helps to place shortcode in the WordPress page that helps put the URL of your audio file on a line automatically. Or else you can insert the audio based on your preference from the WordPress media library, and appropriate shortcodes will be placed into your site.
• HTML5 jQuery Player: As the name suggests, the plugin will help embed an HTML5 jQuery player that contains several nice options, which includes creating music tracks and even allows to offer those tracks for sale. Additionally, it even enables to add images and ratings in your player.
• HTML5 MP3 Player with Playlist: It will help in creating a list, add images to the player, changes its appearance, and so on. Also, it helps to add your audio file links to the social media profiles. But, there is a downside to this plugin: it is not responsive.

Conclusion

Do you want to make your WordPress site more interactive and engaging? In that case, you can consider embedding an audio player to play your audio files. Hope that the post will provide you with the required know-how about adding a music player to your site.

Author Bio :

Sophia is a renowned WordPress developer by profession. If you’re about to Hire WordPress developer, then you can get in touch with her. Sophia already has multiple WordPress-related articles under her name.