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:
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:
Example 3:
Here’s the 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:
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 😉