Support » Themes and Templates » How to stop the playlist from playing the next soundtracks automatically

  • worldless

    (@worldless)


    It’s weird !!! There’s nowhere that I could find the answer but all I know is it has probably something to do with wp-playlist.min.js located in this folder:
    wordpress\wp-includes\js\mediaelement

    I’m saying it because I googled around and I could stop it from looping by changing this line:

    (this.index=0,this.setCurrent())}

    to this:

    (this.index=0)

    But how to stop it from jumping to next tracks on its own ?

Viewing 14 replies - 1 through 14 (of 14 total)
  • worldless

    (@worldless)

    The only link that I could find out there is related to looping which is left unanswered:

    https://wordpress.org/support/topic/how-to-stop-audio-playlist-looping

    I’m really surprised to know whether or not, in this entire universe, there’s a way to stop wordpress playlist from jumping to next tracks automatically!!

    There must be a way and it has to be in wp-playlist.min.js:

    !function(a,b,c){"use strict";var d=c.View.extend({initialize:function(d){this.index=0,this.settings={},this.data=d.metadata||a.parseJSON(this.$("script.wp-playlist-script").html()),this.playerNode=this.$(this.data.type),this.tracks=new c.Collection(this.data.tracks),this.current=this.tracks.first(),"audio"===this.data.type&&(this.currentTemplate=wp.template("wp-playlist-current-item"),this.currentNode=this.$(".wp-playlist-current-item")),this.renderCurrent(),this.data.tracklist&&(this.itemTemplate=wp.template("wp-playlist-item"),this.playingClass="wp-playlist-playing",this.renderTracks()),this.playerNode.attr("src",this.current.get("src")),b.bindAll(this,"bindPlayer","bindResetPlayer","setPlayer","ended","clickTrack"),b.isUndefined(window._wpmejsSettings)||(this.settings=b.clone(_wpmejsSettings)),this.settings.success=this.bindPlayer,this.setPlayer()},bindPlayer:function(a){this.mejs=a,this.mejs.addEventListener("ended",this.ended)},bindResetPlayer:function(a){this.bindPlayer(a),this.playCurrentSrc()},setPlayer:function(a){this.player&&(this.player.pause(),this.player.remove(),this.playerNode=this.$(this.data.type)),a&&(this.playerNode.attr("src",this.current.get("src")),this.settings.success=this.bindResetPlayer),this.player=new MediaElementPlayer(this.playerNode.get(0),this.settings)},playCurrentSrc:function(){this.renderCurrent(),this.mejs.setSrc(this.playerNode.attr("src")),this.mejs.load(),this.mejs.play()},renderCurrent:function(){var a,b="wp-includes/images/media/video.png";"video"===this.data.type?(this.data.images&&this.current.get("image")&&-1===this.current.get("image").src.indexOf(b)&&this.playerNode.attr("poster",this.current.get("image").src),a=this.current.get("dimensions").resized,this.playerNode.attr(a)):(this.data.images||this.current.set("image",!1),this.currentNode.html(this.currentTemplate(this.current.toJSON())))},renderTracks:function(){var b=this,c=1,d=a('<div class="wp-playlist-tracks"></div>');this.tracks.each(function(a){b.data.images||a.set("image",!1),a.set("artists",b.data.artists),a.set("index",b.data.tracknumbers?c:!1),d.append(b.itemTemplate(a.toJSON())),c+=1}),this.$el.append(d),this.$(".wp-playlist-item").eq(0).addClass(this.playingClass)},events:{"click .wp-playlist-item":"clickTrack","click .wp-playlist-next":"next","click .wp-playlist-prev":"prev"},clickTrack:function(a){a.preventDefault(),this.index=this.$(".wp-playlist-item").index(a.currentTarget),this.setCurrent()},ended:function(){this.index+1<this.tracks.length?this.next():(this.index=0)},next:function(){this.index=this.index+1>=this.tracks.length?0:this.index+1,this.setCurrent()},prev:function(){this.index=this.index-1<0?this.tracks.length-1:this.index-1,this.setCurrent()},loadCurrent:function(){var a=this.playerNode.attr("src")&&this.playerNode.attr("src").split(".").pop(),b=this.current.get("src").split(".").pop();this.mejs&&this.mejs.pause(),a!==b?this.setPlayer(!0):(this.playerNode.attr("src",this.current.get("src")),this.playCurrentSrc())},setCurrent:function(){this.current=this.tracks.at(this.index),this.data.tracklist&&this.$(".wp-playlist-item").removeClass(this.playingClass).eq(this.index).addClass(this.playingClass),this.loadCurrent()}});a(document).ready(function(){a(".wp-playlist").each(function(){return new d({el:this})})}),window.WPPlaylistView=d}(jQuery,_,Backbone);

    I did it using the following jQuery snippet:

    jQuery(function ($) {
    	$('.mejs-mediaelement video').on('ended', function (e) {
    		e.preventDefault();
    		$(this)[0].player.pause();
    	});
    });

    Sorry if this is obvious, but how would you implement this in a child theme, so as not to lose it when the WP core updates? That is, would you just load this as a separate .js file?

    TIA!

    Yes, add the code to functions.php in your child theme.

    Put this in the functions.php

    
    define( 'WPPPON_VERSION', '1.0.0' ); // update version number when you change the javascipt code
    
    add_action( 'wp_enqueue_scripts', 'wp_pause_playlist_on_next' );
    function wp_pause_playlist_on_next() {
    	wp_enqueue_script( 'wp-pause-playlist-on-next',
    		plugins_url( '/js/wp-pause-playlist-on-next.js' , __FILE__ ),
    		array( 'wp-playlist' ),
    		WPPPON_VERSION,
    		true
    	);
    }
    

    and here is js/wp-pause-playlist-on-next.js:

    
    jQuery(function ($) {
    	$('.mejs-mediaelement video').on('ended', function (e) {
    		e.preventDefault();
    		$(this)[0].player.pause();
    	});
    });
    

    btw, I’ve done a plugin that lets you link to audio/video in a playlist. It might have code you’d like to borrow from: https://github.com/soderlind/wp-link-to-playlist-item

    Thank you!

    I wonder why the WP functionality for playlists assumes that the default behavior should be for a playlist to play entirely, once a single track is started. Doesn’t seem intuitive to me…

    Hmm. Although I have enqueued the script and uploaded the external .js file, this does not seem to be working. I suspect a path issue of some sort. I have tried placing the .js file in these folders, but no joy:

    /themes/twenty sixteen child/js/
    /themes/twentysixteen/js/
    /wp-includes/js/

    Your jQuery code is fine, but the enqueueing it does not seem to be working at this point. I used a WP plugin called CSS & Javascript Toolbox to insert the jQuery script at the bottom of the page in question like this – you’ll notice I changed the class to “audio” as that is the type of playlist I’m using:

    <script type=’text/javascript’>
    jQuery(function ($) {
    $(‘.mejs-mediaelement audio’).on(‘ended’, function (e) {
    e.preventDefault();
    $(this)[0].player.pause();
    });
    });
    </script>

    That works fine, but for some reason the enqueue still doesn’t work.

    alvias

    (@alvias)

    did you solve the problem?
    i would also like to stop the autoplay

    wpress2010

    (@wpress2010)

    Yes – see the post immediately above your question. What is says, in essence, is that you can insert the Javascript code shown on the page where you have your playlist posted. I used the plugin I referenced to allow me to do this.

    alvias

    (@alvias)

    Thats what i tryed, but its just showing the code under the footer or above the header

    wpress2010

    (@wpress2010)

    Obviously, the script is not being recognized as such.

    I eventually figured out how to properly enqueue this script in my child theme’s functions.php file with this code:

    // Stop audio playlists from automatically advancing once a track is clicked
    define( ‘WPPPON_VERSION’, ‘1.0.0’ ); // update version number as needed

    add_action( ‘wp_enqueue_scripts’, ‘wp_pause_playlist_on_next’ );
    function wp_pause_playlist_on_next() {
    wp_enqueue_script( ‘wp-pause-playlist-on-next’,
    plugins_url( ‘/js/wp-pause-playlist-on-next.js’ , __FILE__ ),
    array( ‘wp-playlist’ ),
    WPPPON_VERSION,
    true
    );
    }

    This works fine. Just make sure to copy the .js file into the proper folder, which is typically:

    wp-content/themes/mytheme/js

    alvias

    (@alvias)

    ok, i dont get it 🙁
    this is the path for the wp-pause-playlist-on-next.js
    wp-content\themes\twentyseventeen-child\js

    i created a blank functions.php for testing in
    wp-content\themes\twentyseventeen-child\
    looking like this

     <?php
     add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
     function theme_enqueue_styles() {
     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
     }
     
    
     // Stop audio playlists from automatically advancing once a track is clicked
     define( 'WPPPON_VERSION', '1.0.0' ); // update version number as needed
     add_action( 'wp_enqueue_scripts', 'wp_pause_playlist_on_next' );
     function wp_pause_playlist_on_next() {
     wp_enqueue_script( 'wp-pause-playlist-on-next',
     plugins_url( '/js/wp-pause-playlist-on-next.js' , __FILE__ ),
     array( 'wp-playlist' ),
     WPPPON_VERSION,
     true
     );
     }
    
     ?>

    its still not working

    My bad for using plugins_url()in my example above. When you’re using this in your (child) theme, use get_stylesheet_directory_uri() eg:

    wp_enqueue_script( 'wp-pause-playlist-on-next',
         get_stylesheet_directory_uri() . '/js/wp-pause-playlist-on-next.js',
         array( 'wp-playlist' ),  
         WPPPON_VERSION,
         true
     );
    alvias

    (@alvias)

    Gosh i am dumb, should have realized that myself 😀

    Thank you very much both of you

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How to stop the playlist from playing the next soundtracks automatically’ is closed to new replies.