emsiledock

Well my code isn’t really optimized. The new hook can make it work in a more proper way, without using globals, so i think it’s a good idea 🙂

The JavaScript can be upgraded too to avoid repetitions

Sure !

In functions.php inside the function dedicated to include scripts i put:

if( is_single() ) {
    wp_enqueue_script('backbone'); // BackboneJS required library
    wp_enqueue_style( 'wp-mediaelement' ); // CSS for playlist and medias
}

In functions.php

/**
 * If the site has already loaded the initial post and that initial post.. 
 * does not have the playlist shortcode in use, then the Javascript is not loaded.
 * 
 * We have to load the Javascript, CSS and template files manually for playlist shortcode to work..
 * with auto_load_next_post
 * 
 * @param   -
 * @return  -
*/

function manage_playlist_shortcode_js() {
  // Get the $post object
  global $post;

  // Only load scripts and styles when the post contains our special shortcodes 
  if ( !is_a( $post, 'WP_Post' ) || !has_shortcode( $post->post_content, 'playlist' ) ) return;
  ?>
  <script>
    ;function insertAfter(newNode, referenceNode) {
      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }

    var WpMediaElementCSS = document.getElementById('wp-mediaelement-css');

    var utilScript= document.createElement('script');
    utilScript.type= 'text/javascript';
    utilScript.src= '<?php echo network_site_url() . "/" . WPINC ; ?>/js/wp-util.min.js';

    var mediaElementScript= document.createElement('script');
    mediaElementScript.type= 'text/javascript';
    mediaElementScript.src= '<?php echo network_site_url() . "/" . WPINC ; ?>/js/mediaelement/mediaelement-and-player.min.js';

    var playlistScript= document.createElement('script');
    playlistScript.type= 'text/javascript';
    playlistScript.src= '<?php echo network_site_url() . "/" . WPINC ; ?>/js/mediaelement/wp-playlist.min.js';

    insertAfter( utilScript, WpMediaElementCSS );
    insertAfter(mediaElementScript, utilScript);
    // Avoid Asynchronous issues
    setTimeout(function(){ insertAfter( playlistScript, mediaElementScript ); }, 3000);
  </script>
  <?php
}

/* This code is exactly the same that WordPress uses in media.php */
function load_playlist_templates() {
  // Get the $post object
    global $post;

  // Only load scripts and styles when the post contains our special shortcodes 
  if ( !is_a( $post, 'WP_Post' ) || !has_shortcode( $post->post_content, 'playlist' ) ) return;

  ?>
  <script type="text/html" id="tmpl-wp-playlist-current-item">
    <# if ( data.image ) { #>
    <img src="{{ data.thumb.src }}" alt="" />
    <# } #>
    <div class="wp-playlist-caption">
            <span class="wp-playlist-item-meta wp-playlist-item-title"><?php
                    /* translators: playlist item title */
                    printf( _x( '“%s”', 'playlist item title' ), '{{ data.title }}' );
            ?></span>
            <# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
            <# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
    </div>
  </script>

  <script type="text/html" id="tmpl-wp-playlist-item">
    <div class="wp-playlist-item">
            <a class="wp-playlist-caption" href="{{ data.src }}">
                    {{ data.index ? ( data.index + '. ' ) : '' }}
                    <# if ( data.caption ) { #>
                            {{ data.caption }}
                    <# } else { #>
                            <span class="wp-playlist-item-title"><?php
                                    /* translators: playlist item title */
                                    printf( _x( '“%s”', 'playlist item title' ), '{{{ data.title }}}' );
                            ?></span>
                            <# if ( data.artists && data.meta.artist ) { #>
                            <span class="wp-playlist-item-artist"> &mdash; {{ data.meta.artist }}</span>
                            <# } #>
                    <# } #>
            </a>
            <# if ( data.meta.length_formatted ) { #>
            <div class="wp-playlist-item-length">{{ data.meta.length_formatted }}</div>
            <# } #>
    </div>
  </script>
  <?php
}

add_action('alnp_load_after_content', 'load_playlist_templates');