Making audio playlist with external audio files?

Question

Playlist shortcode with external audio or video files

Here I explain how you can implement idea 3 in my other answer, where we use the following shortcode structure:

[wpse_playlist type="" current="" style="" tracklist="" tracknumbers="" images="" artist=""]
    [wpse_trac src="" title="" type="" caption="" description="" image="" 
            meta_artist="" meta_album="" meta_genre="" meta_length_formatted=""
            image_src="" image_width="" image_height=""
            thumb_src="" thumb_width="" thumb_height=""]
    [wpse_trac src="" title="" type="" caption="" description="" image="" 
            meta_artist="" meta_album="" meta_genre="" meta_length_formatted=""
            image_src="" image_width="" image_height=""
            thumb_src="" thumb_width="" thumb_height=""]
[/wpse_playlist]

but this does not include the complete list of attributes, since the plugin is still in developement 😉

Example 1:

You can use for example:

[wpse_playlist]
   [wpse_trac title="Ain't Misbehavin'" src="https://s.w.org/images/core/3.9/AintMisbehavin.mp3"]
   [wpse_trac title="Buddy Bolden's Blues" src="https://s.w.org/images/core/3.9/JellyRollMorton-BuddyBoldensBlues.mp3"]
[/wpse_playlist]

in your post content and it will display like this:

wpse playlist

Example 2:

Here’s a more extensive example:

[wpse_playlist type="audio" tracklist="true" tracknumbers="true" images="true" artist="true"]
   [wpse_trac title="Ain't Misbehavin'" src="https://s.w.org/images/core/3.9/AintMisbehavin.mp3" type="audio/mpeg" caption="" description="" image="" meta_artist="Louis Armstrong and His Orchestra" meta_album="78 RPMs and Cylinder Recordings" meta_genre="" meta_length_formatted="3:21" image_src="https://s.w.org/images/core/3.9/louis.jpg" image_width="308" image_height="240" thumb_src="https://s.w.org/images/core/3.9/louis.jpg" thumb_width="308" thumb_height="240"]
   [wpse_trac title="Buddy Bolden's Blues" src="https://s.w.org/images/core/3.9/JellyRollMorton-BuddyBoldensBlues.mp3" type="audio/mpeg" caption="" description="" image="" meta_artist="Jelly Roll Morten" meta_album="78 RPMs and Cylinder Recordings" meta_genre="Jazz" meta_length_formatted="2:09"]
[/wpse_playlist]

with the following output:

extensive - wpse playlist

Example 3:

Here’s the vanilla version:

Vanilla version

generated from the shortcode:

[wpse_playlist type="audio" current="no" tracklist="yes" tracknumbers="no" images="no" artist="no"]
    [wpse_trac title="Davenport Blues" src="https://s.w.org/images/core/3.9/DavenportBlues.mp3"]
    [wpse_trac title="Dixie Blues" src="https://s.w.org/images/core/3.9/Louisiana_Five-Dixie_Blues-1919.mp3"]
[/wpse_playlist]

Example 4:

Here’s the video playlist:

video playlist

from this shortcode:

[wpse_playlist type="video"]
    [wpse_trac caption="Live widgets previews in WordPress 3.9" src="https://s.w.org/images/core/3.9/widgets.mp4" image_src="/wp-content/uploads/2014/04/widgets_screen.png"]
    [wpse_trac caption="Another cool video showing how live widgets previews works in WordPress 3.9" src="https://s.w.org/images/core/3.9/widgets.mp4" image_src="/wp-content/uploads/2014/04/widgets_screen2.png"]
[/wpse_playlist]

Code:

Here’s a first draft version of a single file plugin, but I will try to refine it further on github and post the link soon (Update: https://github.com/birgire/wpse-playlist ):

<?php 
/**
 * Plugin Name: WPSE Playlist shortcode for external files
 * Plugin URI: http://wordpress.stackexchange.com/q/141766/
 * Version: 0.0.1
 */

add_action( 'wp', 'wpse_playlist_init' );

function wpse_playlist_init()
{
    $playlist = new WPSE_Playlist;
    $playlist->init();
}


/**
 * Class WPSE_Playlist
 */

class WPSE_Playlist
{
    protected $type="";
    protected $types    = array( 'audio', 'video' );
    protected $instance = 0;

    public function init()
    {
        add_shortcode( 'wpse_playlist', array( $this, 'playlist_shortcode' ) );
        add_shortcode( 'wpse_trac',     array( $this, 'trac_shortcode'     ) );
    }

    public function playlist_shortcode( $atts = array(), $content="" ) 
    {        
        $this->instance++;
        $atts = shortcode_atts( 
            array(
                'type'          => 'audio',
                'style'         => 'light',
                'tracklist'     => 'true',
                'tracknumbers'  => 'true',
                'images'        => 'true',
                'artists'       => 'true',
                'current'       => 'true',
                'loop'          => 'false',
                'autoplay'      => 'false',
                'id'            => '',
                'width'         => '',
                'height'        => '',
            ), $atts, 'wpse_playlist_shortcode' );

        //----------
        // Input
        //----------
        $atts['id']           = esc_attr( $atts['id'] );
        $atts['type']         = esc_attr( $atts['type'] );
        $atts['style']        = esc_attr( $atts['style'] );
        $atts['tracklist']    = filter_var( $atts['tracklist'], FILTER_VALIDATE_BOOLEAN );
        $atts['tracknumbers'] = filter_var( $atts['tracknumbers'], FILTER_VALIDATE_BOOLEAN );
        $atts['images']       = filter_var( $atts['images'], FILTER_VALIDATE_BOOLEAN );
        $atts['autoplay']     = filter_var( $atts['current'], FILTER_VALIDATE_BOOLEAN );

        // Audio specific:
        $atts['artists']      = filter_var( $atts['artists'], FILTER_VALIDATE_BOOLEAN );
        $atts['current']      = filter_var( $atts['current'], FILTER_VALIDATE_BOOLEAN );

        // Video specific:
        $atts['loop']         = filter_var( $atts['loop'], FILTER_VALIDATE_BOOLEAN );

        // Nested shortcode support:
        $this->type           = ( in_array( $atts['type'], $this->types, TRUE ) ) ? $atts['type'] : 'audio';
        $content              = substr(  strip_tags( nl2br( do_shortcode( $content ) ) ), 0, -2 );

        // Enqueue default scripts and styles for the playlist.
        ( 1 === $this->instance ) && do_action( 'wp_playlist_scripts', $atts['type'], $atts['style'] );

        //----------
        // Output
        //----------
        $html="";
        $html .= sprintf( '<div class="wp-playlist wp-%s-playlist wp-playlist-%s">', 
            $this->type, 
            $atts['style'] 
        );

        // Current audio item:
        if( $atts['current'] && 'audio' === $this->type )
            $html .= '<div class="wp-playlist-current-item"></div>';   

        // Video player:                      
        if( 'video' === $this->type ):
            $html .= sprintf( '<video controls="controls" preload="none" width="%s" height="%s"></video>',
                $atts['style'],
                $atts['width'],
                $atts['height']
            );
        // Audio player:                      
        else:
            $html .= sprintf( '<audio controls="controls" preload="metadata"></audio>', 
                $atts['style'] 
            );
        endif;

       // Next/Previous:
        $html .= '<div class="wp-playlist-next"></div><div class="wp-playlist-prev"></div>';

        // JSON 
        $html .= sprintf( '
            <script type="application/json">{
                "type":"%s",
                "tracklist":%b,
                "tracknumbers":%b,
                "images":%b,
                "artists":%b,
                "tracks":[%s]
            }</script></div>', 
            $atts['type'], 
            $atts['tracklist'], 
            $atts['tracknumbers'],  
            $atts['images'],
            $atts['artists'],
            $content
        );

        return $html;
    }

    public function trac_shortcode( $atts = array(), $content="" ) 
    {        
        $atts = shortcode_atts( 
            array(
            'src'                   => '',
            'type'                  => ( 'video' === $this->type ) ? 'video/mp4' : 'audio/mpeg',
            'title'                 => '',
            'caption'               => '',
            'description'           => '',
            'image_src'             => sprintf( '%s/wp-includes/images/media/%s.png', get_site_url(), $this->type ),
            'image_width'           => '48',
            'image_height'          => '64',
            'thumb_src'             => sprintf( '%s/wp-includes/images/media/%s.png', get_site_url(), $this->type ),
            'thumb_width'           => '48',
            'thumb_height'          => '64',
            'meta_artist'           => '',
            'meta_album'            => '',
            'meta_genre'            => '',
            'meta_length_formatted' => '',
            'dimensions_original_width'  => '300',
            'dimensions_original_height' => '200',
            'dimensions_resized_width'   => '600',
            'dimensions_resized_height'  => '400',
        ), $atts, 'wpse_trac_shortcode' );

        //----------
        // Input
        //----------
        $data['src']                      = esc_url( $atts['src'] );
        $data['title']                    = sanitize_text_field( $atts['title'] );
        $data['type']                     = sanitize_text_field( $atts['type'] );
        $data['caption']                  = sanitize_text_field( $atts['caption'] );
        $data['description']              = sanitize_text_field( $atts['description'] );
        $data['image']['src']             = esc_url( $atts['image_src'] );
        $data['image']['width']           = intval( $atts['image_width'] );
        $data['image']['height']          = intval( $atts['image_height'] );
        $data['thumb']['src']             = esc_url( $atts['thumb_src'] );
        $data['thumb']['width']           = intval( $atts['thumb_width'] );
        $data['thumb']['height']          = intval( $atts['thumb_height'] );
        $data['meta']['length_formatted'] = sanitize_text_field( $atts['meta_length_formatted'] );

        // Video related:
        if( 'video' === $this->type ) 
        {
            $data['dimensions']['original']['width']  = sanitize_text_field( $atts['dimensions_original_width'] );
            $data['dimensions']['original']['height'] = sanitize_text_field( $atts['dimensions_original_height'] );
            $data['dimensions']['resized']['width']   = sanitize_text_field( $atts['dimensions_resized_width'] );
            $data['dimensions']['resized']['height']  = sanitize_text_field( $atts['dimensions_resized_height'] );

        // Audio related:
        } else {
            $data['meta']['artist']           = sanitize_text_field( $atts['meta_artist'] );
            $data['meta']['album']            = sanitize_text_field( $atts['meta_album'] );
            $data['meta']['genre']            = sanitize_text_field( $atts['meta_genre'] );
        }

        //----------
        // Output:           
        //----------
        return json_encode( $data ) . ',';      
    }

} // end class

Happy listening 😉