3

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!

4

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_class="audio-mini" 
       wrapper_style="width:182px; border: 1px solid black; padding: 10px; 
                      background-color: #888;" 
       wrapper_width="182"
       wrapper_tag="div"  
       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;
    $mini->init();
});


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]
</div>

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

Playlist:

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 '14 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 '14 at 6:47
  • @lacer Welcome to WPSE. You can check my answer on how to modify the playlist template. – birgire May 4 '14 at 9:15
  • 1
    Odd how some very comprehensive answers stay without any up-votes. Well done. – Christine Cooper Sep 2 '14 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 '16 at 18:05

protected by Community Oct 23 '18 at 8:06

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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