There are a lot of reasons why you might want to add a music or audio player to your WordPress website. You can use it to allow users to play the audio version of the article they are reading or you can use it to simply add some nice background music to the website. If you are running a small news website, another useful way of using an audio player to improve user experience would be to provide audio version of all news headlines with a brief summary.
There are a lot of free and paid plugins available to add an audio player to your WordPress website. We have already created a tutorial which discusses how to add a free music layer to your WordPress website. In this tutorial, we will move our focus to the sticky HTML5 music player WordPress plugin available on CodeCanyon. As you will see, the paid plugin offers a lot of important and useful functions missing in the free plugin. You also get free support for six months and free updates for lifetime.
Why Use the Sticky HTML5 Music Player WordPress Plugin?
The plugin that you choose to use on your website will depend on your own requirements. In case of the Sticky HTML5 Music Player WordPress plugin, some of the features can significantly improve user experience.
It gives you the ability to control all the basic settings like autoplay, volume, looping, or shuffling the music. You can also change the color of different UI elements like the previous, pause, shuffle and next buttons. You can also hide these buttons if they are not needed.
One very useful feature of the plugin is continuous playback. This means that whenever you navigate to a new page, the plugin will continue playing the audio from previous minute. The audio level and everything else also remains the same.
Another useful feature of the plugin is its ability to read contents from a folder of MP3 files in order to automatically generate the playlist. This way you don’t have to manually add each audio file to the playlist.
The plugin creates a sticky player—that means it sticks to the bottom of the screen and does not interfere with all other content on the website. It also allows you to set a bunch of options to load the player in minimized or maximized state.
In this tutorial, we will use all these features of the plugin in order to create a music player that sticks to the bottom left corner of the screen. It will also automatically generate a playlist based on audio files located in a certain folder.
Creating Your Music Player
Once you have purchased and installed the plugin, it is very easy to add a music player to your website.
You just have to choose the Add New option from WordPress dashboard under LBG AUDIO3 HTML5.
On the next screen, you can give your player any appropriate name. This name is only used to help you identify the player so you can change it later.
You can now change the appearance of the player and many other options by going to Manage Players and then clicking on Player Settings.
On the next page, you will see a lot of settings which can be changed individually for each audio player that you create with this plugin. There are two skins available for all the controls in the audio player: blackControllers and whiteControllers. They will determine the color of different buttons like previous, next, play, pause, and shuffle.
The color of other UI elements like the volume control or the buffer indicators can be set using a color picker. You can change the colors to any value you want in order to match them to the over all theme of the website.
There are many other settings at the bottom of the same page. They allow you to show or hide different playback buttons. You can also control the spacing between the player and the playlist by tweaking the value of player margin.
If you want your users to enjoy continuous playback when they are visiting different pages on your website, you should consider setting an appropriate value for the Cookie Expiration Time setting. It is set to 1 by default. This means that any user who visits the website multiple times within a single day will be able to continue the audio playback from same position at which they left.
Adding Songs to Playlist
There are two ways to specify the path of audio files in your music player and add them to its playlist.
The first method requires you to click on the Playlist button of corresponding music player on the Manage Players screen. On the next page, you will see all the existing audio files already added to the current playlist. You can drag them around to change the order in which they are played.
Click on the Add new button to add an audio file to the playlist. Now, you just have to specify the path to an MP3 file and set a title for it. Everything else is optional. The title of the file is what will appear in the playlist. Click the Add Record button and the changes will be reflected immediately in the music player UI.
This process can be very tedious if you want to add 20 or 30 audio files to a single playlist. Luckily, the Sticky HTML5 Music Player will generate a playlist for you if you simply specify the path to the folder where all your files are located.
To do this, you have to select Generate Playlist From Folder under LBG AUDIO3 HTML5 in WordPress dashboard. Now specify the path to the folder where all the audio files are located. Remember that this path is relative to the WordPress installation directory, so you don’t need to add any leading or trailing slashes. For example, if the audio files are located in a folder called favorite_music in the root directory, simply specify the path as favorite_music instead of favorite_music/ or /favorite_music/.
Once you click on Generate Playlist, the plugin will automatically fill in the title and other information for each audio file based on its metadata. You will still be able to manually change the title or author name later if you want.
Customizing the Playlist Appearance
You can also change the spacing and color of the playlist that appears below the music player. The settings for that are available below General Settings on same page.
The setting titled Number of Items Per Screen will determine how many songs in the playlist are listed at once under the player. The player starts showing a scrollbar at the right side of the playlist if there are additional songs that could not be displayed on single screen. This is very helpful if the playlist has a lot of songs or audio files and you don’t want the player to take up a lot of area on the screen when maximized.
Once you have changed all the values to suit your own project needs, you can click on the Preview Player button at the top to see how the music player finally looks.
Once you are fully satisfied with the UI and other aspects of the music player, you can add it to any webpage you want using shortcodes.
Adding the Music Player to Your Website
This is the last step of the tutorial. You can add the Sticky HTML5 Music Player WordPress plugin to any post or page you like by copying the shortcode shown on the Manage Players page in the plugin’s Dashboard menu. In our case, the shortcode is [lbg_audio3_html5 settings_id='4'].
If you want to show the shortcode on each webpage of you website, a better option to add it would be to simply set the Activate For Footer option to true under Player Settings. This will add the music player to the footer of every webpage on your website without the use of any shortcode.
One more thing that you should remember is that the the code for the music player is added at the location where you paste the shortcode. However, visually the player will always stick to a fixed position on the webpage—the bottom left corner in our case.
Final Thoughts
In this tutorial, we learned how to add a music player to any WordPress website using the Sticky HTML5 Music Player WordPress plugin from Codecanyon. The plugin offers some nice features like auto generation of playlists from the contents of a folder and the continuous playback when users load different webpages. It is also very easy to change the UI of different music players so that they blend in perfectly with the rest of the website.
There are a couple of situations where using the continuous playback feature could be useful like playing all the important news headlines of the day or narrating an event or a story. Similarly, you could also use the playlist auto generation feature to quickly create different playlists for different users and occasions. How do you plan on using this music player on your website? Let us know in the comments.