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.

(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?

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

 HTML<div class="mejs-container">

    <div class="mejs-inner">

        <div class="mejs-mediaelement">

            <audio class="wp-audio-shortcode">...</audio>

        </div>

        <div class="mejs-layers">

            <div class="mejs-layer">...</div>

        </div>

        <div class="mejs-controls">

            <div class="mejs-button"></div>

        </div>

        <div class="mejs-clear">...</div>

    </div>

</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?