sumber : https://code.tutsplus.com/tutorials/how-to-add-an-audio-player-to-your-wordpress-site-with-a-free-plugin–cms-33409?_ga=2.46166368.657038014.1562206628-1841267436.1562206628
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.
WORDPRESS15 Best WordPress Audio Player and Video Player Plugins
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, I’m sure you would like to choose an 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 plenty of options in the WordPress plugin repository. 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 go through a few important aspects of this plugin that allow you to customize the 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 the 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 been created so far in your application. Along with the titleand 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 Playoption 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 on 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 low cost and which provide the utmost quality.
Komentar Terbaru