Làm danh sách phát âm thanh với các tập tin âm thanh bên ngoài?

Trong WordPress 3.9 có một tính năng mới có thể tạo danh sách phát với các tệp âm thanh được tải lên. Tôi muốn sử dụng các tập tin âm thanh bên ngoài. Tôi sử dụng hai máy chủ web. Một cho trang web của tôi và một cho các tập tin âm thanh của tôi.

Shortcode danh sách phát với các tập tin âm thanh hoặc video bên ngoài

Ở đây tôi giải thích cách bạn có thể thực hiện ý tưởng 3 trong câu trả lời khác của tôi, nơi chúng tôi sử dụng cấu trúc shortcode sau:

[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]

nhưng điều này không bao gồm danh sách đầy đủ các thuộc tính, vì plugin vẫn đang được phát triển ;-)

Ví dụ 1:

Bạn có thể sử dụng ví dụ:

[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]

trong nội dung bài đăng của bạn và nó sẽ hiển thị như thế này:

Ví dụ 2:

Đây là một ví dụ rộng hơn:

[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]

với đầu ra sau:

Ví dụ 3:

Đây là phiên bản vanilla:

được tạo từ 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]

Ví dụ 4:

Đây là danh sách phát video:

từ mã ngắn này:

[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]

Mã số:

Đây là phiên bản nháp đầu tiên của một plugin tập tin duy nhất, nhưng tôi sẽ cố gắng tinh chỉnh nó thêm trên github và đăng liên kết sớm ( Cập nhật: 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

Nghe vui vẻ ;-)

Khi bạn xây dựng danh sách phát và thêm nó vào nội dung bài đăng của mình, bạn sẽ nhận được một mã ngắn như thế này:

[playlist ids="2855,1296"]

trong đó các id đang đề cập đến các tệp đính kèm âm thanh.

Danh sách phát chứa nhiều dữ liệu meta âm thanh, do đó không thể bao gồm các tệp bên ngoài theo cách này.

Dưới đây là một số ý tưởng chưa được kiểm tra:

Ý tưởng 1:

Tôi tự hỏi liệu nó có hoạt động để bạn tải các tệp lên cài đặt WordPress chính của bạn tại example.com , để thu thập dữ liệu meta và tạo danh sách phát nhưng sau đó phân phát các tệp âm thanh từ máy chủ thứ hai của bạn, audio.example.com không?

Bạn có thể thử sửa đổi các url tệp âm thanh, trong danh sách phát của mình, bằng:

// 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' );
});

Ở đâu

function wpse_141766_wp_get_attachment_url( $url )
{
    // Edit to your needs:    
    return str_ireplace( 'example.com', 'audio.example.com', $url );
}

Ý tưởng 2:

Bạn có thể tạo danh sách nhạc theo cách thủ công.

Nếu bạn kiểm tra wp-admin/about.php?updatedtrang trong bản 3.9cài đặt mới của mình , bạn sẽ thấy rằng nó chứa danh sách phát hoạt động với các tệp âm thanh bên ngoài. Đây là danh sách nhạc có hai bản nhạc:

    <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>

nơi trên cùng của trang đó chứa:

wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_script( 'wp-playlist' );
add_action( 'admin_footer', 'wp_underscore_playlist_templates', 0 );

Nhưng tôi nghĩ bạn chỉ có thể sử dụng

do_action( 'wp_playlist_scripts', 'audio', 'light' );

hoặc là

do_action( 'wp_playlist_scripts', 'audio', 'dark' );

thay thế.

Ý tưởng 3:

Bạn có thể thử tạo shortcode danh sách phát của riêng mình:

[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]

hoặc là

[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]

Điều này có vẻ khá vụng về, vì vậy bạn có thể thử một phiên bản đơn giản, với các giá trị mặc định cho các thuộc tính không sử dụng:

[myplaylist]
    [mytrac src="" title=""]
    [mytrac src="" title=""]
[/myplaylist]

hoặc một số cấu trúc phù hợp với bạn tốt hơn.