Wordpress audio player has two different styles

Question

So, when my page loads a see an audio player that looks like:

But then, when the page finishes loading then it looks like:

I noticed this in Google Chrome, but am not sure whether it's a Google Chrome specific player or how the WordPress audio player looks by default before it loads it's styles. It's a quick thing...I see the grey one for a couple of seconds then WordPress loads and it goes away.

The reason why I'm asking is because I think it looks much better than the WordPress audio player...is there any way to use this one or does anyone know whether this is a Google Chrome specific player or WordPress specific?

I know for a fact it's not the theme or coding because I created everything from scratch, so it came from something elsewhere

All I did to get the player was copy and paste a link from an mp3 file:

Any ideas?

Thanks,
Josh

Answer 1

The UI you want is the default browser UI for an <audio> tag, specifically Google Chrome. That tag gets swapped out for a JS based audio player control once the DOM has finished loading. The dark player is the JS based audio player. The light UI you prefer is the browsers default UI.

This means, that the UI you want is only available if the user has the same OS and browser, as well as the same OS settings.

For example, here is your MP3 file in various browsers default audio player implementations on MacOS in the big 3 browsers ( safari, google chrome, firefox ):

Notice my machine is set to dark mode and 2 of the browsers adjusted the players accordingly.

My recommendation is that you keep the WP Media element script/styling, and add your own styles on top. This ensures that your player looks how you want it on all platforms.

If however you wanted to revert to the <audio> tag, you can use this:

add_action('init', 'remove_media_element', 10);
function remove_media_element() {
    wp_deregister_script('wp-mediaelement');
    wp_deregister_style('wp-mediaelement');
} 

But keep in mind:

• This will also impact <video> tags
• Player appearance will be different on different devices
• Player functionality will differ. E.g. Safari has airplay controls, but Chrome does not, Chrome has a download menu but Safari does not
• Some plugins will stop working. A quick google for that code revealed a user asking why it broken a gallery plugin
• Browsers can and do change these UIs, what you see today may not be what you see tomorrow