• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / ReSkin the WordPress Audio Shortcode

ReSkin the WordPress Audio Shortcode

By Victor M. Font Jr.
March 6, 20146 Comments

Voices of the Past HTML5 PlayerWordPress 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:

https://s3.amazonaws.com/victorfont/audio/onleadership.mp3

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() . '/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.

  • 4shares
  • Facebook1
  • Twitter0
  • Pinterest1
  • LinkedIn2
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. jaycbrf4

    July 12, 2017 at 11:50 am

    Looks like the CSS is not working properly here in tutorial or on your website

    Reply
    • Victor M. Font Jr.

      July 12, 2017 at 12:14 pm

      I’m not surprised. This is an old article and the WordPress media player has been updated a few times since this was written. Thanks for the heads up!

      Reply
  2. Naina Bright

    May 15, 2015 at 7:29 am

    I’ve always wanted to have a podcast on my blog but I wasn’t quite sure what plugin would work. This would make a great tool for bloggers!

    Reply
  3. Rob

    February 5, 2015 at 10:42 am

    Whoops. Regarding previous comment: Spoke to soon, more work needed…

    Rob

    Reply
  4. Rob

    February 5, 2015 at 10:40 am

    Thanks for this useful article. I found I had to make a few tweaks to get the player looking right with the version of WordPress I’m currently working with (4.1). They are as follows:

    /* Increase in height to accommodate track length and current time */
    div.audio-player { height: 82px }

    /* Remove ‘div’ from mejs-controls div.mejs-horizontal-volume-slider */
    mejs-controls .mejs-horizontal-volume-slider { … }

    /* Add another selector to .mejs-controls div.mejs-time-rail */
    .mejs-controls div.mejs-time-rail,
    .mejs-controls div.mejs-currenttime-container { width: 380px; }

    /* Add a selector to .mejs-controls .mejs-time-rail span */
    .mejs-controls .mejs-time-rail,
    .mejs-controls .mejs-time-rail span { … }

    /* Change top: 4px to -4px here */
    .mejs-controls .mejs-time-rail .mejs-time-float-current { … }

    /* Change top: 20px to 13px (but that might just be a matter of taste) */
    .mejs-duration { … }

    Rob

    Reply
  5. Bright Verge

    January 22, 2015 at 6:35 am

    I was having a think about this and thought it would be good to not load the old styles in the first place. I’ve been through most of the mediaelement.js library and can’t find the ugly CSS that is loading for that first 0.3 seconds. Do you have any idea where it would be?

    Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page