iDevie
November 2019
M T W T F S S
« Oct    
 123
45678910
11121314151617
18192021222324
252627282930  

Categories


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:

  1. The plugin is fully responsive. By default, it will cover the full width of the enclosing element.
  2. 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.
  3. 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.

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:

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.

Audio Album Default Player

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.

Audio Album Customization Page

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.

Audio Album CSS Customization

Here are the CSS rules that I changed in order to get the desired look for my music player:

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:

As you can see, each track can have its own value for the buttonlink and buttontext parameters. Here is the rendered output:

Audio Album Buttons and Links

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!


Comments 0
There are currently no comments.