Customizing WordPress MediaElement.js Audio Shortcode Again

Back in 2015 I customized the WordPress MediaElement.js audio shortcode, and some time since then it broke. I tried fixing it. I dug around and did things but... nothing seemed to work. So I finally cleared out the old code and started fresh.

This is what the vanilla version looked like:

This is what my 2015 version looked like:

And now here's the 2018 version:

The process was a lot more time-consuming last time - mainly because I'd never done it before, but also because documentation for MediaElement.js in regards to WP was pretty much non-existent. Unfortunately this is still the case, but I did a search and found this new and super helpful post, with a new stylesheet included. I didn't want that particular style, but I used it as reference and experimented with other colors and dimensions, trying to make it somewhat like my own one, and you can see the result above.

I'm pretty happy with the result! Thoughts?

It's a bit buffer now. A bit thicker, and simpler (no gradients... yet), but I was happy to see the loading pattern was a part of the original player, so that part didn't need redoing. Further mods may happen when time allows, but for now: the player's no longer broken! Hurrah.

If you want to make your own modification the link above's a fantastic reference. Super easy to understand, use, and modify. Not all elements are included in the stylesheet, but you can copy in any additional ones from the official one (just check your page source on a player page - there should be a link to the official stylesheet there).

And if you don't: this is all you really need. The barebones; essentials. Much easier than the one I used before.

Hopefully it'll work longer than the last one, too.

Most preferably forever.