0

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

enter image description here

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

enter image description here

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:

enter image description here

Any ideas?

Thanks,
Josh

7
  • You might want to say how you are adding that audioplayer - does it come from a oembed, block, plugin etc...? – Q Studio Jan 1 at 22:12
  • The way I added it was literally just copying and pasting a link to an MP3 file. – Josh Rodgers Jan 1 at 22:14
  • Copy and paste it to where? Try and be as specific as possible, so people can offer specific advice. – Q Studio Jan 1 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. – Josh Rodgers Jan 1 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 Jan 1 at 22:28
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 ):

Safari

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
2
  • Thank you for that, honestly, I just noticed it today, didn’t know whether it was the browser default or from WordPress, thank you for the clarification! It’s kind of cool that you can disable the WP version if you prefer. – Josh Rodgers Jan 1 at 23:51
  • If you were, try disabling just the stylesheet then adding your own version :) I did look up styling the audio tag directly but the solution was to add HTML controls then hide the original tag, which is how WP Media Element works. I did a quick search and found cssigniter.com/… and this article in particular was useful blog.josemcastaneda.com/2016/11/13/… – Tom J Nowell Jan 1 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.