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

3 Views

I frequently use the WordPress audio shortcode to embed my podcast episodes in my posts: 

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:

Read More
  • 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.)

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. 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

  2. There are two filter hooks to deal with this. One at the beginning, with very few info, with it we shortcut the whole shortcode and return our own custom HTML code:

    add_filter( 'wp_audio_shortcode_override', 'short1_so_23875654', 10, 4 );

function short1_so_23875654( $return = '', $attr, $content, $instances ) 
{
    # If $return is not an empty array, the shorcode function will stop here printing OUR HTML
    // $return = '<html code here>';
    return $return;
};

    The parameters that arrive are:

    Array
(
    [0] => ''
    [1] => Array
        (
            [src] => http://example.com/wp-content/uploads/file.mp3
        )

    [2] => ''
    [3] => 1
)

    And the other one that runs at the end of the shortcode function:

    add_filter( 'wp_audio_shortcode', 'short2_so_23875654', 10, 5 );

function short2_so_23875654( $html, $atts, $audio, $post_id, $library )
{
    return $html;   
}

    The parameters that arrive are:

    Array
(
    [0] => <audio class="wp-audio-shortcode" id="audio-715-1" preload="none" style="width: 100%" controls="controls"><source type="audio/mpeg" src="http://example.com/wp-content/uploads/file.mp3?_=1" /><a href="http://example.com/wp-content/uploads/file.mp3">http://plugins.dev/wp-content/uploads/2013/10/04_discipline_64kb.mp3</a></audio>
    [1] => Array
        (
            [class] => wp-audio-shortcode
            [id] => audio-715-1
            [preload] => none
            [style] => width: 100%
        )

    [2] => 
    [3] => 715
    [4] => mediaelement
)

  3. I just did it by styling my custom.css in the theme editor.

    The values of the audio shortcode are the following. In my case, I changed it so it won’t be affected by any WordPress update (even if it’s dirtier than the PHP solution on the other comment). You could use the developper tools and style the player your own way (my problem was that i didn’t need a 100% width player).

    :

    .mejs-mute,
.mejs-duration-container, 
.mejs-time, 
.mejs-duration-container,

    ... {...}

    HTML output of WordPress audio shortcode

  4. I added my stylesheet additionally to the existing one, like I explained in this post:

        function enqueue_mediaelement(){
        wp_enqueue_style( 'wp-mediaelement' );
        //enqueue '/wp-content/my-theme/audio-player-styles.css'
        wp_enqueue_style('my-audio-player', get_stylesheet_directory_uri() . '/audio-player-styles.css', array(), null );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

    For example if you want to color the players background, you could add now the following to audio-player-styles.css:

     .mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
    background-color: #B27D47;
}