How To Style WordPress's Audio Player?

WordPress has a built in media player. Chuck in an .MP3 or other sound file, and it will play directly in the browser. Nifty! The only problem is that is looks a bit... dull.

🔊 Celeste
🎤 Alex Fitch

(From Alex Fitch's Eola)

It works, but it's not exactly what you'd call gorgeous, is it?

Wouldn't it be nice if we could have something like this?
Victor M Font Jr's media player theme

Well, the player is from MediaElement.js - it's just HTML, CSS, and JavaScript.

<div class="mejs-container">
    <div class="mejs-inner">
        <div class="mejs-mediaelement">
            <audio class="wp-audio-shortcode">...</audio>
        <div class="mejs-layers">
            <div class="mejs-layer">...</div>
        <div class="mejs-controls">
            <div class="mejs-button"></div>
        <div class="mejs-clear">...</div>

So, all we need to do is change the CSS, right? Well... sort of! It's the sort of over-engineered CSS solution that makes most developers want to weep. It's really not at all obvious how to change even the most basic elements.

There are some CSS themes out there which do look nice, but are sadly outdated.

I found Justin Adlock's Theme MediaElement - it's an Open Source stylesheet for MediaElement.js which makes things slightly easier to work with. Sadly, there's very little documentation and the project hasn't been updated in over a year.

So, what next? I'm stumped!

Does anyone know of a relative simple way to style the WordPress Audio Player?

Share this post on…

One thought on “How To Style WordPress's Audio Player?”

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">

Discover more from Terence Eden’s Blog

Subscribe now to keep reading and get access to the full archive.

Continue reading