用外部音频文件制作音频播放列表？

时间：2014-04-19 作者：mahdiar

WordPress 3.9中有一个新功能，可以用上传的音频文件制作播放列表。我想使用外部音频文件。我使用两个web主机。一个用于我的网站，一个用于我的音频文件。

2 个回复
最合适的回答,由SO网友:birgire 整理而成

带有外部音频或视频文件的播放列表短码，这里我在我的另一个答案中解释了如何实现idea 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]
在您的帖子内容中，它将显示如下：

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]
具有以下输出：

extensive - wpse playlist

示例3：

这是普通版本：

Vanilla version

从短代码生成：

[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：以下是视频播放列表：

video playlist

从此短代码：

[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上进一步完善它，并很快发布链接(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
快乐倾听；-）

SO网友:birgire

当您构建播放列表并将其添加到帖子内容时，您会得到如下短代码：

[playlist ids="2855,1296"]
其中ID是指音频附件。

播放列表包含大量音频元数据，因此不可能以这种方式包含外部文件。

以下是一些未经测试的想法：

想法1：

我想知道您是否可以将文件上传到您的主WordPress安装中，例如。com，收集元数据并构建播放列表，然后从第二台主机提供音频文件。实例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：您可以手动创建播放列表。

如果您查看wp-admin/about.php?updated 新页面中的页面3.9 安装后，您将看到它包含一个带有外部音频文件的工作播放列表。以下是包含两首曲目的播放列表：

    <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]
或者一些更适合你的结构。

结束
标签： audio   小码农  

相关推荐

Error Using Audio plugin

我已经安装了音频插件，以创建Xbrowser播放列表，但出现以下错误jPlayer 2.0.0 : id=\'jquery_jplayer_1\' : Error!到目前为止，我所做的只是创建一个新帖子，使用wordpress音频上传器将音频上传到帖子，使用以下短代码将播放列表添加到帖子，然后发布。[audio layout=\"list\"] 也尝试过[audio]但产生了同样的错误这些文件是。mp3格式，可以在其他播放器中播放。如果相关，该站点存储在本地。