CODEWITHSUNDEEP
csswordpressmedia-playeraudio-player
TrippWest
TrippWest

Reputation: 51

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

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:

Here's what I would like the player to look like:

(I have the .png file of the play button.)

Upvotes: 5

Views: 10937

Answers (4)

murcoder
murcoder

Reputation: 99

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;
}

Upvotes: 0

Samuel LOL Hackson
Samuel LOL Hackson

Reputation: 1221

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

Upvotes: 4

Maikeximu
Maikeximu

Reputation: 318

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

Upvotes: 0

brasofilo
brasofilo

Reputation: 26065

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
)

Upvotes: 0

Related Questions