ReSkin the WordPress Audio Shortcode

WordPress has had the ability to natively embed audio and video files into posts and pages since version 3.6 was released on August 1, 2013. Internally, WordPress uses the very powerful MediaElement.js HTML5 audio and video players to accomplish this task. These players are written in pure HTML and CSS to enhance the capabilities of the native HTML5 <audio> and <video> elements. HTML5 is supported by most modern browsers, but for older browsers, MediaElement.js automatically falls back to Flash and/or Silverlight players. The MediaElement.js source code can be found in your WordPress installation's wp-includes/js/mediaelement folder.

Lately, I've been creating quite a few posts and pages that use audio and video. Until LongTail Video raised their prices, I had been using the very capable JWPlayer. But since I've updated all of my sites to HTML5 (and the fact that I'm a bit of a tightwad), I decided to experiment with the HTML5 native capabilities enabled within WordPress. And while the WordPress shortcode works well, it falls far short from providing the type of presentation I want for my sites. But as I thought about the fact that the shortcode is powered by MediaElement.js, I wondered if it was possible to change the look and feel of the WordPress shortcode?

Simply embedding an audio file into a post or page using the shortcode produces the following result:

The shortcode that produced the above player is:

[audio src="https://s3.amazonaws.com/victorfont/audio/onleadership.mp3" type="audio/mp3" controls="true" preload="auto"]

The image at the top of the page is what an audio clip looks like when embedded with the [audio] shortcode on the Voices of the Past page on my other website http://www.fontlife.com/. The code used to produce that player is:

Introduction
[audio src="https://s3.amazonaws.com/fontlife/audio/Introduction.mp3" type="audio/mp3" controls="true" preload="auto"]

The shortcode used for both players is identical except for the source file name, but what a vast difference in the look and feel of the two players!

Before we begin, I have to give a shout out to Jake Rocheleau at DesignShack.net. He wrote an excellent tutorial called Creating a Custom HTML5 Audio Element UI by Jake Rocheleau, DesignShack.net about creating this MediaElement.js skin. I encourage you to read this article and download his source files, then come back here to learn how to integrate Jake's work with WordPress.

Reskin the [Audio] Shortcode

The first step is to disable the core MediaElement.js .css files. This was a very time consuming step. The wp_dequeue_style and wp_deregister_style, which are used to remove the core .css, require the file's handle in order to work. I had to search through the wp-includes/media.php source code to find the exact handle the WordPress developers used to enqueue the .css in the first place.

// remove WordPress css file
function remove_mediaelement_styles() {
    if( is_page( '2' ) ) {
	wp_dequeue_style('wp-mediaelement');
	wp_deregister_style('wp-mediaelement');
    }
}
add_action( 'wp_print_styles', 'remove_mediaelement_styles' );

The second step is to create your custom skin and enqueue the .css in WordPress. To create the custom .css, I simply edited the styles.css file that is provided in Jake's tutorial. I removed everything not related to the skin and saved it as audio-player-styles.css. I copied that file to my theme's directory as well as the skin's graphic elements to my theme's images folder. Add the following code to your functions.php file to enqueue the custom skin.

// add your own custom ccs file to reskin the audio player
function add_audio_player_styles () {
    if( is_page( '2' ) ) {
	wp_enqueue_style('vmf-audio-player', get_stylesheet_directory_uri() . 'https://c4u5s8j9.rocketcdn.me/audio-player-styles.css', array(), null );
    }
}
add_action( 'wp_enqueue_scripts', 'add_audio_player_styles');

Other than changing colors and fonts to match my theme, Jake's .css worked fine for the most part right out of the box, but there were two elements missing. The controls for current time and duration are not addressed in the tutorial's css file. I added the following to complete the skin.

.mejs-currenttime, .mejs-duration {
	color: #fff;
	font-size: 10px;
}

.mejs-currenttime {
	position: relative;
	top: 45px;
 	left: 55px;
}

.mejs-duration {
	position: relative;
	top: 20px;
 	left: 410px;
}

Download my custom audio-player-styles.css

What Did I Miss?

While testing the MediaElement.js player, I discovered some quirks in the display on different browsers. On a Windows 8.1 machine, Firefox 27.0.1 and IE 11 both display the audio player correctly. On Mac OS X 10.9.2, Firefox 27.0.1 doubles the media's duration time. In the image at the top of the page, the actual duration of the .mp3 file is 24 seconds, not 48 as shown. In Safari, as the media plays, the elapsed time and duration remain at 00:00. They don't update at all.

Interestingly, the audio sample I used to demonstrate the standard shortcode in this article displays the duration correctly for that clip. This has been driving me a little buggy since the duration displays correctly with one skin but not the other. The JavaScript files are the same, the only difference is the .css, which shouldn't impact the display like that. I thought it might have something to do with the sampling rate used in the .mp3 file, but experimentation proved otherwise. I tested the Introduction.mp3 clip in this article and the duration displayed correctly. There must be something else going on of which I'm not aware, but I'll leave that troubleshooting for another day.