問題描述
在 WordPress 3.9 中有一個新功能可以使上傳的音頻文件的播放列表。我想使用外部音頻文件。我使用兩個網絡主機。一個用於我的網站，一個用於我的音頻文件。
最佳解決方案
帶有外部音頻或視頻文件的播放列表短碼
在這裏我將解釋如何在我的另一個答案中實現想法 3，我們使用以下短代碼結構：
[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]
但是這並不包括完整的屬性列表，因為該插件仍然在開發中;-)
示例 1：
你可以使用例如：
[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]
在你的帖子內容，它將顯示如下：
示例 2：
這是一個更廣泛的例子：
[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]
具有以下輸出：
示例 3：
以下是香草版本：
從短碼產生：
[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]
例 4：
以下是影片播放清單：
從這個短碼：
[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]
碼：
這是一個單一文件插件的第一個草稿版本，但我會嘗試在 github 進一步改進，併發布鏈接很快 (更新：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
快樂聽;-)
次佳解決方案
當您構建播放列表並將其添加到您的帖子內容時，您會收到一個如下代碼：
ids 指的是音頻附件。
播放列表包含大量音頻元數據，因此不可能以這種方式包含外部文件。
以下是一些未經測試的想法：
想法 1：
我想知道是否可以將文件上傳到 example.com 的主要 WordPress 安裝，以收集元數據並構建播放列表，然後從第二個主機 audio.example.com 提供音頻文件？
您可以嘗試通過以下方式修改播放列表中的音頻文件 url：
// 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' );
});
哪裏
function wpse_141766_wp_get_attachment_url( $url )
{
// Edit to your needs:
return str_ireplace( 'example.com', 'audio.example.com', $url );
}
想法 2：
您可以手動創建播放列表。
如果您在新的 3.9 安裝中查看 wp-admin/about.php?updated 頁面，您將看到它包含具有外部音頻文件的工作播放列表。以下是兩首曲目的播放列表：
<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>
該頁面的頂部包含：
wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_script( 'wp-playlist' );
add_action( 'admin_footer', 'wp_underscore_playlist_templates', 0 );
但我認為你可以使用
do_action( 'wp_playlist_scripts', 'audio', 'light' );
要麼
do_action( 'wp_playlist_scripts', 'audio', 'dark' );
代替。
想法 3：
您可以嘗試創建自己的播放列表短碼：
[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]
要麼
[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]
這看起來很笨拙，所以你可以嘗試一個簡化的版本，默認值為未使用的屬性：
[myplaylist]
[mytrac src="" title=""]
[mytrac src="" title=""]
[/myplaylist]
或一些適合你的結構。
參考文獻
注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。