Is it possible to control the width of the Wordpress 3.9 Audio player? I like the simplicity of the player control and would like to include a narrow-width version of it in a table that lists all of the songs in an album. So something like:

[audio mp3="myfile.mp3" width="120px"][/audio]

Also, is there a reference somewhere that explains how the audio player can be styled (colors, etc.)?

Thanks in advance for any help!

1 Answer 1


Wrapper for subset of audio players:

Here's a method that you can use if you want to add a wrapper to some of the native audio players, but not all of them. If you want to add a wrapper that looks like this:

Modifed audio player

then you can use the following extra attributes in the audio shortcode:

[audio wrapper="on" 
       wrapper_style="width:182px; border: 1px solid black; padding: 10px; 
                      background-color: #888;" 
       mp3="http://example.com/mozart.mp3" ]

to add a wrapper with a given class, style. tag and width.

Notice that if you shrink the player to 120px, you will need to hide the volume button and the volume slider with CSS:

.mejs-volume-button, .mejs-horizontal-volume-slider { display: none; }

To avoid affecting all audio players, you can use a custom wrapper class to target the small players:

.audio-mini .mejs-volume-button, 
.audio-mini .mejs-horizontal-volume-slider { display: none; }

To activate the wrapper you use the wrapper attribute with values like on, yes, true or 1.

The above method is possible with the help of the following plugin:

 * Plugin Name: Wrapper for Audio Player shortcode
 * Plugin URI:  https://wordpress.stackexchange.com/a/143281/26350
 * Author:      birgire

add_action( 'init', function(){
    $mini = new WPSE_Audio_Player_Wrapper;

class WPSE_Audio_Player_Wrapper
    protected $wrapper          = FALSE;
    protected $tag              = 'div';
    protected $allowed_tags     = array( 'div', 'p' );
    protected $width            = '';
    protected $class            = '';
    protected $style            = '';

    public function init()
        add_filter( 'wp_audio_shortcode_override' , 
                    array( $this, 'wp_audio_shortcode_override' ), 10, 2 );

    public function wp_audio_shortcode_override( $html, $attr )
        if( isset( $attr['wrapper'] ) )
            $this->wrapper = filter_var( $attr['wrapper'], FILTER_VALIDATE_BOOLEAN );

        if( isset( $attr['wrapper_width'] ) )
            $this->width = $attr['wrapper_width'];

        if( isset( $attr['wrapper_class'] ) )
            $this->class = $attr['wrapper_class'];

        if( isset( $attr['wrapper_style'] ) )
            $this->style = $attr['wrapper_style'];

        if( isset( $attr['wrapper_tag'] ) 
            && in_array( $attr['wrapper_tag'], $this->allowed_tags, TRUE ) 
            $this->tag = $attr['wrapper_tag'];

        add_filter( 'wp_audio_shortcode', 
                        array( $this, 'wp_audio_shortcode' ) );

        return $html;

    function wp_audio_shortcode( $html )
        if( $this->wrapper )
            $s = '';

            if( '' !== $this->class )
                $s .= sprintf( ' class="%s"', esc_attr( $this->class ) );

            if( '' !== $this->style )
                $s .= sprintf( ' style="%s"', esc_attr( $this->style ) );

            if( '' !== $this->width )
                $s .= sprintf( ' width="%s"', esc_attr( $this->width ) );

            $html = sprintf( '<%s%s>%s</%s>', $this->tag, $s, $html, $this->tag );

        return $html;

Save the plugin code to the file /wp-content/plugins/wrapped-audio-player/wrapped-audio-player.php and activate it.

Previous answer:

The default style for the audio player is width:100% so you can always add a div wrapper around your shortcode in the content editor:

<div style="width:120px;">
    [audio mp3="myfile.mp3]

It looks like you can't overwrite the default style with:

    [audio mp3="myfile.mp3 style="width:120px;"]

because the style attribute of the audio tag is hardcoded. I'm not sure if that is intentionally or a bug.

The supported shortcode attributes are src, loop, autoplay and preload.

Here are few other ideas how you could try to change the width to 120px:

120px audio player

They are not well tested, but hopefully you can work with it further and adjust to your needs:

Idea 1:

You could get around it by making your own shortcode that wraps the above div around the audio shortcode.

Idea 2:

Use the wp_audio_shortcode filter to replace it:

 * Change the width of the audio player from 100% to 120px via replace
function wpse_143272_wp_audio_shortcode_a( $html )
    return str_ireplace( 'width: 100%', 'width: 120px', $html );

add_filter( 'wp_audio_shortcode', 'wpse_143272_wp_audio_shortcode_a' );

Idea 3:

Wrap a div tag around it with the help of the wp_audio_shortcode filter:

 * Change the width of the audio player from 100% to 120px with a div wrapper
function wpse_143272_wp_audio_shortcode_b( $html )
    return sprintf( '<div style="width: 120px">%s</div>', $html );

add_filter( 'wp_audio_shortcode', 'wpse_143272_wp_audio_shortcode_b' );

Idea 4:

Adjust it with CSS:

 * Change the width of the audio player from 100% to 120px with CSS

function wpse_143272_wp_head()
    echo '<style>.wp-audio-shortcode { width: 120px !important; }</style>';

add_action( 'wp_head', 'wpse_143272_wp_head' ),

or just add it directly to your stylesheet ;-)


To show the list of all the songs, you want to use the [playlist] shortcode instead, but then you will have to upload the audio files to your WordPress Media Library. If you want to use external audio files with the playlist you can try this solution.

  • Thanks for the detailed response. I'll be sure to look into these options. I discovered that the player does collapse if placed within another container, much like the div you recommended. I placed my songs in a table, with the player inside a width-controlled column. But I may end up using the div approach, or the stylesheet approach. But thanks again for the input.
    – lacer
    May 4, 2014 at 6:45
  • One other question on the [playlist] short code - do you know if it's extensible? Ultimately I'd love to use the playlist if I could add columns to display a 'buy' or 'download' link for each track. Do you know if that's possible?
    – lacer
    May 4, 2014 at 6:47
  • @lacer Welcome to WPSE. You can check my answer on how to modify the playlist template.
    – birgire
    May 4, 2014 at 9:15
  • 1
    Odd how some very comprehensive answers stay without any up-votes. Well done.
    – Christine Cooper
    Sep 2, 2014 at 23:25
  • 1
    +1. Why not just call the callback on the filter directly? add_filter( 'wp_audio_shortcode_override', [ new WPSE_Audio_Player_Wrapper, 'callback' ], 10, 2 ); (just as example)? I know it's an old answer, but it's good one :)
    – kaiser
    May 28, 2016 at 18:05

Not the answer you're looking for? Browse other questions tagged or ask your own question.