Audio-Wiedergabeliste mit externen Audiodateien erstellen?

7

In WordPress 3.9 gibt es eine neue Funktion, mit der eine Wiedergabeliste mit hochgeladenen Audiodateien erstellt werden kann. Ich möchte externe Audiodateien verwenden. Ich benutze zwei Webhosts. Eine für meine Website und eine für meine Audiodateien.

audio Mahdiar
quelle

Antworten:

7

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:

wpse Wiedergabeliste

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:

umfangreiche - wpse Wiedergabeliste

Beispiel 3:

Hier ist die Vanille-Version:

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:

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 class

Viel Spaß beim Zuhören ;-)

Birgire
quelle
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
2
Diese Antwort ist ... wow. +1
Kaiser
3

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.

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