How to stop the Wordpress audio playlist from play

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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... :)