Audio-Wiedergabeliste mit externen Audiodateien erstellen?
Antworten:
Wiedergabelisten-Shortcode mit externen Audio- oder Videodateien
Hier erkläre ich, wie Sie Idee 3 in meiner anderen Antwort implementieren können , in der wir die folgende Shortcode-Struktur verwenden:
[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]Dies beinhaltet jedoch nicht die vollständige Liste der Attribute, da sich das Plugin noch in der Entwicklung befindet ;-)
Beispiel 1:
Sie können zum Beispiel verwenden:
[wpse_playlist]
[wpse_trac title="Ain't Misbehavin'" src="//s.w.org/images/core/3.9/AintMisbehavin.mp3"]
[wpse_trac title="Buddy Bolden's Blues" src="//s.w.org/images/core/3.9/JellyRollMorton-BuddyBoldensBlues.mp3"]
[/wpse_playlist]in Ihrem Beitrag Inhalt und es wird wie folgt angezeigt:
Beispiel 2:
Hier ist ein ausführlicheres Beispiel:
[wpse_playlist type="audio" tracklist="true" tracknumbers="true" images="true" artist="true"]
[wpse_trac title="Ain't Misbehavin'" src="//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="//s.w.org/images/core/3.9/louis.jpg" image_width="308" image_height="240" thumb_src="//s.w.org/images/core/3.9/louis.jpg" thumb_width="308" thumb_height="240"]
[wpse_trac title="Buddy Bolden's Blues" src="//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]mit folgender Ausgabe:
Beispiel 3:
Hier ist die Vanille-Version:
generiert aus dem Shortcode:
[wpse_playlist type="audio" current="no" tracklist="yes" tracknumbers="no" images="no" artist="no"]
[wpse_trac title="Davenport Blues" src="//s.w.org/images/core/3.9/DavenportBlues.mp3"]
[wpse_trac title="Dixie Blues" src="//s.w.org/images/core/3.9/Louisiana_Five-Dixie_Blues-1919.mp3"]
[/wpse_playlist]Beispiel 4:
Hier ist die Video-Wiedergabeliste:
von diesem Shortcode:
[wpse_playlist type="video"]
[wpse_trac caption="Live widgets previews in WordPress 3.9" src="//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="//s.w.org/images/core/3.9/widgets.mp4" image_src="/wp-content/uploads/2014/04/widgets_screen2.png"]
[/wpse_playlist]Code:
Hier ist eine erste Entwurfsversion eines einzelnen Datei-Plugins, aber ich werde versuchen, es auf Github weiter zu verfeinern und den Link bald zu veröffentlichen ( 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 classViel Spaß beim Zuhören ;-)
Ich weiß nicht, wie ich dir danken soll! Erstaunlich :)
—
Mahdiar
Gibt es überhaupt einen Download-Link neben jedem MP3-Dateinamen?
—
Mahdiar
@mahdiar Bitte lesen Sie meine Antwort auf Ihre Frage hier , wo ich beschreibe, wie Sie die Wiedergabelistenvorlage an Ihre Bedürfnisse anpassen können.
—
Birgire
Hier ist das Plugin auf Github: github.com/birgire/wpse-playlist
—
Birgire
Diese Antwort ist ... wow. +1
—
Kaiser
Wenn Sie eine Wiedergabeliste erstellen und zu Ihrem Beitragsinhalt hinzufügen, erhalten Sie einen Shortcode wie diesen:
[playlist ids="2855,1296"]Dabei beziehen sich die IDs auf die Audioanhänge.
Die Wiedergabelisten enthalten viele Audio-Metadaten, sodass externe Dateien auf diese Weise nicht eingefügt werden können.
Hier sind einige ungetestete Ideen:
Idee 1:
Ich frage mich, ob es für Sie funktionieren würde, die Dateien in Ihre WordPress-Hauptinstallation unter example.com hochzuladen , die Metadaten zu sammeln und die Wiedergabelisten zu erstellen, aber dann die Audiodateien von Ihrem zweiten Host, audio.example.com , bereitzustellen .
Sie können versuchen, die URLs der Audiodateien in Ihrer Wiedergabeliste wie folgt zu ändern:
// Add filter for playlists
add_filter( 'post_playlist', function(){
add_filter( 'wp_get_attachment_url' ,'wpse_141766_wp_get_attachment_url' );
});
// Remove filter
add_action( 'wp_playlist_scripts', function(){
remove_filter( 'wp_get_attachment_url' ,'wpse_141766_wp_get_attachment_url' );
});wo
function wpse_141766_wp_get_attachment_url( $url )
{
// Edit to your needs:
return str_ireplace( 'example.com', 'audio.example.com', $url );
}Idee 2:
Sie können die Wiedergabeliste manuell erstellen.
Wenn Sie die wp-admin/about.php?updatedSeite in Ihrer neuen 3.9Installation auschecken, werden Sie feststellen, dass sie eine funktionierende Wiedergabeliste mit externen Audiodateien enthält. Hier ist die Wiedergabeliste mit zwei Titeln:
<div class="wp-playlist wp-audio-playlist wp-playlist-light">
<div class="wp-playlist-current-item"></div>
<audio controls="controls" preload="metadata"></audio>
<div class="wp-playlist-next"></div>
<div class="wp-playlist-prev"></div>
<?php
$audio_icon_js = esc_js( includes_url( 'images/media/audio.png' ) );
$wp_host = '//s.w.org/images/core/3.9/';
?>
<script type="application/json">{
"type":"audio",
"tracklist":true,
"tracknumbers":true,
"images":true,
"artists":true,
"tracks":[{
"src":"<?php echo $wp_host ?>AintMisbehavin.mp3",
"type":"audio\/mpeg","title":"Ain't Misbehavin'","caption":"","description":"",
"meta":{
"artist":"Louis Armstrong & His Orchestra",
"album":"78 RPMs & Cylinder Recordings",
"genre":"Jazz",
"length_formatted":"3:21"
},
"image":{"src":"//s.w.org/images/core/3.9/louis.jpg","width":308,"height":240},
"thumb":{"src":"//s.w.org/images/core/3.9/louis.jpg","width":308,"height":240}
},
{
"src":"<?php echo $wp_host ?>JellyRollMorton-BuddyBoldensBlues.mp3",
"type":"audio\/mpeg","title":"Buddy Bolden's Blues","caption":"","description":"",
"meta":{
"artist":"Jelly Roll Morten",
"album":"78 RPMs & Cylinder Recordings",
"genre":"Jazz",
"length_formatted":"2:09"
},
"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
}]
}</script>
</div>wo der obere Rand dieser Seite enthält:
wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_script( 'wp-playlist' );
add_action( 'admin_footer', 'wp_underscore_playlist_templates', 0 );Aber ich denke du kannst es einfach benutzen
do_action( 'wp_playlist_scripts', 'audio', 'light' );oder
do_action( 'wp_playlist_scripts', 'audio', 'dark' );stattdessen.
Idee 3:
Sie könnten versuchen, einen eigenen Shortcode für die Wiedergabeliste zu erstellen:
[myplaylist type="" tracklist="" tracknumbers="" images="" artist="" ]
[mytrac src="" title="" type="" caption="" description="" image=""]
[mymeta artist="" album="" genre="" length_formatted=""]
[myimage src="" width="" height=""]
[mythumb src="" width="" height=""]
[/mytrac]
[mytrac src="" title="" type="" caption="" description="" image=""]
[mymeta artist="" album="" genre="" length_formatted=""]
[myimage src="" width="" height=""]
[mythumb src="" width="" height=""]
[/mytrac]
[/myplaylist]oder
[myplaylist type="" tracklist="" tracknumbers="" images="" artist="" ]
[mytrac 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=""]
[mytrac 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=""]
[/myplaylist]Dies sieht ziemlich umständlich aus, sodass Sie eine vereinfachte Version mit Standardwerten für die nicht verwendeten Attribute ausprobieren können:
[myplaylist]
[mytrac src="" title=""]
[mytrac src="" title=""]
[/myplaylist]oder eine Struktur, die besser zu Ihnen passt.
Vielen Dank . Ich denke, der dritte ist der beste. Wie kann ich das machen ?
—
Mahdiar
@mahdiar, ich habe eine neue Antwort hinzugefügt, die auf der dritten Option basiert, bei der ich einen ersten Entwurf eines Plugins eingefügt habe.
—
Birgire