Is it possible to control the width of the Wordpress audio player?

Question

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!

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:

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:

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.