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