Wordpress has a cool audio playlist but unfortunately it jumps to next tracks automatically every time it finishes playing the song which is annoying. all I know is it has "probably" something to do with wp-playlist.min.js located here:
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 the question is how would I stop it from jumping to next tracks on its own ?
here's the codes related to 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);
If you have not found an answer to this, and feel comfortable modifying source files you could edit the 'ended' event on the file you point out.
ended:function(){this.index+1<this.tracks.length?this.next():(this.index=0,this.setCurrent())}
The this.next() is the one that changes to the next song. The this.index=0 returns to the start of the playlist.
To stop the player to jump to the next song on it's own, comment the this.next instruction.
I did it using the following script, add this to your (child) theme functions.php:
add_action( 'wp_footer', function () {
?>
<script>
jQuery(function ($) {
$('.mejs-mediaelement video').on('ended', function (e) {
e.preventDefault();
$(this)[0].player.pause();
});
});
</script>
<?php
},99);
soderlind's code works for audio too but you do need to tweak it before adding it to your functions file. Change
$('.mejs-mediaelement video')
to
$('.mejs-mediaelement audio')
Need to make changes based on your requirements into this file: wordpress\wp-includes\js\mediaelement\wp-playlist.min.js
Below is updated code for video playlist and scenarios are
-> After completion of the first video it goes to next video but autoplay off
-> On the change of video from the list, video src changed in the player but autoplay off
-> In case of video changed from the list while playing another one, video src will be changed but autoplay off
! function(a, b, c) {
"use strict";
function d() {
a(".wp-playlist:not(:has(.mejs-container))").each(function() {
new e({
el: this
})
})
}
window.wp = window.wp || {};
var e = 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()
},
playnextSrc: function() {
this.renderCurrent(), this.mejs.setSrc(this.playerNode.attr("src")), this.mejs.load()
},
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), 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() {
if ( this.index + 1 < this.tracks.length ) {
this.next();
} else {
this.index = 0;
this.setCurrent();
}
},
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.playnextSrc())
},
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()
}
});
window.wp.playlist = {
initialize: d
}, a(document).ready(d), window.WPPlaylistView = e}(jQuery, _, Backbone);
Yes, Code is in beautified mode... :)
