Any website which lets users discover, buy, share, or download music or other sound effects should always have an audio player. Every user would like to preview the audio or music to determine if they want to purchase or share it or not. Giving users the option to play this audio from the webpage itself, without the need to download anything, will result in a better user experience.
Luckily, WordPress offers both free and premium plugins to add audio players to any webpage. Most of the free plugins will do the job for you, but only a few of them allow you to adapt the look of the player to the overall design of the website.
In this tutorial, you will learn about a completely free-to-use plugin called Audio Album that will allow you to embed audio files in a webpage and design your own music player interface with full control over its appearance.
Overview of Audio Album
This plugin is basically meant to group different audio files together. For example, let’s say you have ten different songs from a single artist. Using this plugin, you could group them all together under a single heading as an album. Consistent styling could then be applied to the whole album in order to make it stand out. You can use the plugin to add multiple albums on the same page.
Here are some of its features:
- The plugin is fully responsive. By default, it will cover the full width of the enclosing element.
- You can use custom fonts for the music player. By default, the plugin will inherit the fonts from the theme itself, but you can also specify other fonts.
- The plugin is easy to customize and allows you to change the color of the album, the player, the text, and the time and volume bars.
The plugin is also very easy to use and set up. Now, let’s get started and create a music player!
Creating the Music Player
The plugin offers two shortcodes: [audioalbum] and [audiotrack]. Both of them are required to create the player.
The [audioalbum] shortcode creates the header of the album. You can use the title, detail and date parameters inside it to provide relevant information about the album or the music list you are creating.
The title will appear in big letters, and the detail or date will be shown below it. Here is an example to show how you can use this shortcode.
[audioalbum title="Stay Motivated" detail="Upbeat music by different artists" date="May 2019"]
The [audiotrack] shortcode also has a couple of parameters to allow you to specify the audio source and properties like whether it should be played in a loop, autoplayed, or preloaded. The title and songwriter attributes can be used to provide information about the song title and its creator. Here are some examples:
[audiotrack title="Inspiration" songwriter="Rafael Krux" mp3="path/to/music/inspiration.mp3"] [audiotrack title="Funshine" songwriter="Kevin MacLeod" mp3="path/to/music/funshine.mp3"] [audiotrack title="Pickled Pink" songwriter="Kevin MacLeod" mp3="path/to/music/pickled_pink.mp3"]
Make sure that you specify the correct source for the song. Just these four lines will create a music player on your webpage that looks like the image below.
You could add the attributes autoplay="true" and loop="true" to one of these songs, and it would keep playing endlessly, without the user ever pressing the play button.
Customizing the Music Player
There are two different ways to customize the appearance of the music player that we just created.
The easiest way would be to simply go to Appearance > Customize > Audio Album. There, you will be able to change the album background, the player background, and the color of all the text and buttons.
If you want to make other changes to the appearance of the music player,
you will have to write your own CSS to replace or override the
styling provided by the plugin. You can remove the CSS applied by the
plugin by checking the Manual CSS checkbox at the bottom.
Now, you can apply your own CSS to the player and customize its appearance exactly how you want. Instead of starting from scratch, though, it might be better if you simply take the CSS applied by the plugin as a starting point and put it into your own stylesheet so that you can just make changes where necessary instead of rewriting the whole thing.
I created the following theme for the Audio Album music player by overwriting some CSS rules in the plugin stylesheet.
Here are the CSS rules that I changed in order to get the desired look for my music player:
h2.audioalbum {
font-family: 'passion One';
font-size: 3rem;
background: black;
border-top: 10px solid red;
}
p.audioalbum {
font-family: 'Exo';
font-weight: 600;
font-size: 1.25rem;
text-transform: uppercase;
background: linear-gradient(70deg, red 70%, black 70%);
border-bottom: 5px solid black;
padding: 10px 10px 5px 10px;
}
.track .songtitle::before {
box-sizing: border-box;
content: counter(track);
counter-increment: track;
display: inline-block;
width: 40px;
background: black;
position: relative;
top: 10px;
left: 10px;
height: 40px;
line-height: 1;
text-align: center;
border: 4px solid white;
padding-top: 5px;
font-weight: bold;
font-family: 'Passion One';
font-size: 1.5rem;
margin-right: 20px;
}
.track .songtitle {
clear: right;
display: block;
font-size: 1.5rem;
padding: 10px 0 0 0;
font-family: 'Exo';
}
.track .songwriter {
color: #fff;
display: block;
font-size: 12px;
line-height: 1;
opacity: 1;
padding-left: 60px;
}
.track .wp-audio-shortcode.mejs-audio .mejs-inner>.mejs-controls,
.track .audiobutton a {
background: black;
}
.track .mejs-controls .mejs-time-rail .mejs-time-total,
.track .mejs-time-rail .mejs-time-total .mejs-time-loaded,
.track .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
background: orange;
border-radius: 10px;
}
.track .mejs-time-rail .mejs-time-total .mejs-time-current,
.track .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: red;
border-bottom: 5px solid white;
border-radius: 10px;
}
The h2.audioalbum selector controls the appearance of the main heading in the music player. The CSS rules applied to p.audioalbum will control the appearance of the subheading. Strategic use of linear gradients and color-stop values creates the slant in the subheading title bars.
Experiment with different values for various CSS rules applied to all the music player elements to create your own unique theme.
Additional Music Player Options
There are four additional parameters that you can use with the [audiotrack] shortcode to create popups. These popups can be used to show users some extra information about the song or music they are playing. For instance, you could provide a link with each track to open a purchase page, lyrics page, or some other license information page.
These four parameters are buttonlink, buttontext, width, and height. The width and height parameters are used to specify the width and height of the popup window. The buttonlink parameter stores the page or post id of the target webpage that you want to open in the popup window. Finally, the buttontext parameter is used to specify the text for the link. If not specified, the link text is set to lyrics.
Here is an example using these parameters:
[audiotrack title="Inspiration" songwriter="Rafael Krux" mp3="path/to/music/inspiration.mp3" buttonlink="820" buttontext="More from Artist"] [audiotrack title="Funshine" songwriter="Kevin MacLeod" mp3="path/to/music/funshine.mp3" buttonlink="843" buttontext="Share"] [audiotrack title="Pickled Pink" songwriter="Kevin MacLeod" mp3="path/to/music/pickled_pink.mp3" buttonlink="909" buttontext="Purchase"]
As you can see, each track can have its own value for the buttonlink and buttontext parameters. Here is the rendered output:
Clicking on any of these Purchase buttons will open a popup window with a webpage or post determined by the id specified in the buttonlink parameter.
Final Thoughts
As you saw in this tutorial, the Audio Album plugin makes it easy to add an audio or music player to your website. All you need to do is add a couple of shortcodes to the webpage where you want the music player to appear. You are also allowed to show multiple players on the same webpage in order to create multiple groups for different kinds of music or songs. You can visit the plugin page to read the FAQ for Audio Album.
The color of the album, track, or the buttons and control can also be changed very easily. Full customization is possible if you know a little bit of CSS. Feel free to show your own Audio Album plugin skins in the comments below!