How to Style the Default Wordpress Audio Player with CSS

Looking for class of Wordpress audio player volume level

You need the correct selector, and background instead of color:

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{
  background: #cc3333;
}

Wordpress audio using wp_audio_shortcode

How can I turn off/disable the mejs-mediaelement player that is added by the wp_audio_shortcode?

If you want to completely disable it, then use the wp_audio_shortcode_library hook to prevent the media / player library's CSS and JS files from being queued/loaded:

add_filter( 'wp_audio_shortcode_library', '__return_empty_string' );

Alternatively, don't disable the library, but disable or replace only the default CSS class name: (the default media library JS/script for the [audio] Shortcode is targeting only HTML elements with the wp-audio-shortcode class)

add_filter( 'wp_audio_shortcode_class', '__return_empty_string' );

WP Audio Shortcode and AJAX

this is certainly because:

• Outputing the wp_audio_player() from ajax will only give the HTML markup
• I believe wp_audio_player() to also add scripts (css maybe) to the page when called normally, without ajax.

What you could try:

• Try to put another hidden wp_audio_player() in your PHP template to load the required scripts. It could work directly, or you could need to analyse the script to trigger what's needed.

• you may also be able to queue it as seen here wp_enqueue_script( 'wp-mediaelement' );

• As seen here it's possible to prevent Wordpress to load those scripts (some of them at least)

Audio Player:

• Why do you need the Wordpress one, and cannot use a typical HTML5 audio player ?

---

Related Topics