Building a Music Player Plugin for WordPress
Posted on 15th June 2023
Introduction
WordPress is a great platform for building all sorts of websites and applications. One area where WordPress shines is in its plugin architecture. Plugins allow you to extend the functionality of WordPress without having to write a lot of code.
In this tutorial, we’re going to build a music player plugin for WordPress. This plugin will allow you to embed a music player on your WordPress site and give your visitors the ability to control the playback of the music.
Creating the Plugin
The first thing we need to do is create a new plugin. We’ll call our plugin “Simple Music Player”.
To create a new plugin, we’ll need to create a new directory in the WordPress plugin directory. The WordPress plugin directory is located at /wp-content/plugins.
In the /wp-content/plugins directory, create a new directory called “simple-music-player”.
Inside the “simple-music-player” directory, create a new file called “simple-music-player.php”.
The “simple-music-player.php” file is the main plugin file. This is the file that WordPress will load when your plugin is activated.
In the “simple-music-player.php” file, we’ll need to add some code to tell WordPress that we’re creating a new plugin.
The first thing we need to do is add a plugin header. The plugin header is a block of comments at the top of the plugin file that tells WordPress about the plugin.
Here’s the code for the plugin header:
In the plugin header, we’ve defined the following information:
Plugin Name – The name of the plugin
Plugin URI – The URI of the plugin
Description – A short description of the plugin
Version – The plugin version number
Author – The author of the plugin
Author URI – The author’s URI
License – The license of the plugin
After the plugin header, we’ve added a line of code to load the WordPress default scripts and styles. We’ll need these scripts and styles for our plugin.
Adding the Music Player
Now that we have a plugin, we need to add the actual music player.
We’ll be using the WordPress MediaElement library to build our music player. MediaElement is a library that allows you to easily build cross-browser HTML5 media players.
To add the music player, we’ll need to add some HTML to our plugin.
In the “simple-music-player.php” file, add the following HTML:
This HTML will add a basic HTML5 audio player to our plugin. The “src” attribute specifies the URL of the audio file to play. The “controls” attribute tells the browser to display the controls for the audio player.
If you preview your plugin now, you should see the music player.
Adding Playlist Support
Our plugin currently only supports a single audio file. We can easily add support for playlists by adding a little bit of HTML and JavaScript.
First, we need to add some HTML to our plugin. In the “simple-music-player.php” file, add the following HTML:
This HTML will add a basic HTML5 audio player and a playlist. The playlist is a simple unordered list. Each list item contains a link to an audio file.
Next, we need to add some JavaScript to our plugin. In the “simple-music-player.php” file, add the following JavaScript:
var player = document.getElementById(‘player’);
var playlist = document.getElementById(‘playlist’);
var tracks = playlist.getElementsByTagName(‘a’);
for (var i=0; i<tracks.length; i++) {
var track = tracks[i];
track.addEventListener('click', function(e) {
e.preventDefault();
player.src = this.href;
player.play();
});
}
This JavaScript will get the audio player and playlist elements from the HTML. It will then loop through all of the tracks in the playlist and add an event listener for the “click” event.
When a track is clicked, the event listener will change the “src” attribute of the audio player to the URL of the clicked track. The audio player will then start playing the track.
If you preview your plugin now, you should see the music player and playlist. You should be able to click on the tracks in the playlist and have the audio player start playing them.
Adding a Shortcode
Our plugin is now almost complete. The only thing left to do is add a shortcode. Shortcodes are a great way to allow users to easily embed content in their posts and pages.
To add a shortcode, we’ll need to add some code to our plugin. In the “simple-music-player.php” file, add the following code:
This code will add a new shortcode called “simple-music-player”. When this shortcode is used, the plugin will include the “simple-music-player.php” file and return the output.
To use the shortcode, simply add the [simple-music-player] shortcode to any post or page.
Conclusion
In this tutorial, we’ve learned how to build a music player plugin for WordPress. We’ve also learned how to add playlist support and how to add a shortcode.
If you want to learn more about plugin development, be sure to check out the WordPress Developer Resources.
In order to add a music player to your WordPress website, you will need to install and activate the WordPress Audio Player plugin. Once you have done so, you will need to create a new post or page in WordPress and then click on the “Add Media” button. From here, you will need to click on the “Upload Files” tab and then select the audio file that you wish to upload. Once the file has been uploaded, you will need to click on the “Insert into post” button.
After you have inserted the audio file into your post or page, you will need to click on the “Add Media” button again. This time, you will need to click on the “Insert Music Player” button. A popup window will appear and you will need to select the audio file that you wish to play. Once you have done so, you will need to click on the “Insert Music Player” button.
Your WordPress website will now have a music player embedded into it.
