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

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

• customization
• audio

• You might want to say how you are adding that audioplayer - does it come from a oembed, block, plugin etc...? – Q Studio Commented Jan 1, 2021 at 22:12
• The way I added it was literally just copying and pasting a link to an MP3 file. – joshmrodg Commented Jan 1, 2021 at 22:14
• Copy and paste it to where? Try and be as specific as possible, so people can offer specific advice. – Q Studio Commented Jan 1, 2021 at 22:15
• 1 I uploaded a picture of my post editor so you can see what it looks like, the link I pasted has a red border around it. – joshmrodg Commented Jan 1, 2021 at 22:24
• Ok - so, this is an oembed inside post content - the player presumably is WP default, as you say you did not skin this. You might need to inspect the page as it loads to see what styles change - it might also show you where both sets of styling rules come from - perhaps some rules are deferred, which is why the UI changes. – Q Studio Commented Jan 1, 2021 at 22:28

1 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