How do I style the default Wordpress audio player with CSS?

audio-player, css, media-player, wordpress

Solution

Consider this:

// Deactivate default MediaElement.js styles by WordPress
function remove_mediaelement_styles() {
    if( is_home() ) {
        wp_dequeue_style('wp-mediaelement');
        wp_deregister_style('wp-mediaelement');
    }
}
add_action( 'wp_print_styles', 'remove_mediaelement_styles' );

// Add own custom CSS file to reskin the audio player
function add_audio_player_styles () {
    if( is_home() ) {
        wp_enqueue_style('mini-audio-player', get_stylesheet_directory_uri() . '/assets/mediaelement/mediaelementplayer.css', array(), null );
    }
}
add_action( 'wp_enqueue_scripts', 'add_audio_player_styles');

This way, you can now copy the whole mediaelement folder out of wp-include, enqueue your copy instead of the original and then fiddle with the .css there. The lines marked with //optional show how you can use different styles depending on the page your visitor is in. Found it here

Problem

I frequently use the Wordpress audio shortcode to embed my podcast episodes in my posts: ``` [audio src="http://podcastsourcefile"] ``` Unfortunately, the default audio player looks terrible. I would like to have it restyled with CSS. I have a mockup I can send to show you what it should look like, but here's the basic gist: - background color: #B27D47 - replace play button image (I can provide the .png file) - make the player 75 pixels tall, 100% width - round the corners of the player Here's what I would like the player to look like: (I have the .png file of the play button.)

Original source