Question

I’m creating my own HTML5 audio player capable of handling playlists. I have created a custom myPlaylist object with includes all play(), pause(), stop() and other needed functionality. This is all working correctly, but moreover, I need to be aware about when an audio file has ended in order to automatically start playing the next one.

Here’s the relevant parts of the code I’m using:

function myPlaylist(){

    var player = document.createElement('audio');
    var audio = $(player).get(0);

    this.next = function next(){
        // Picks next song in the playlist and plays it
        ...
    };

    $(audio).bind('ended', function() {
        alert("Song is finished!");
        // Here I want to call to my next() function
    });
}

I haven’t been able to figure out how to do it. I’ve tried already several combinations, like $(this).next(), which seems the most reasonable and actually displays the alert, but then does nothing ¿?, also this.next(), which also displays the alert but then shows an error since this refers to the HTML5 audio element, which does not have a next() function.

I’ve also tried another approach, using

audio.onended = function(){
    alert("Song is finished!");
    $(this).next();
}; 

But those do not even trigger the alert. Also audio.ended does not work.

So, I’m basically clueless right now, does anyone have any idea what am I doing wrong? Thanks in advance.

Oh, and I’ve tested all this in the latest versions of Google Chrome and Safari in Mac OS X.

---

EDIT Following the advice given in HTML5 audio playlist – how to play a second audio file after the first has ended?, I’ve also tried the following code

player.addEventListener("ended", function() {
    alert("Song is finished!");
    $(this).next();
});

And

player.addEventListener("ended", next);

None of them work either, although the first one shows the alert properly.

---

EDIT 2 Using the search I came across this question, which might also have something to do with my problem, so in order to get rid of any possible troubles with the reference to this, I added a new variable referring to the object itself, so now I’m basically working with:

function myPlaylist(){

    var player = document.createElement('audio');
    var audio = $(player).get(0);
    var me = $(this);

    this.next = function next(){
        // Picks next song in the playlist and plays it
        ...
    };

    $(audio).bind('ended', function() {
        alert("Song is finished!");
        me.next();
    });
}

But then I get an error saying that the Object does not have a method next().

I don’t know what else can I try… Any extra information will be highly appreciated, thank you!

Answer 1

there’s an HTML5 playlist example handling the ended event here, if that helps?

in your event handler you reference this, but in this context this refers to the DOM element that caught the event, i.e. your audio element.. try this instead:

function myPlaylist(){

    var self = this;
    var player = document.createElement('audio');

    this.next = function (){
        // Picks next song in the playlist and plays it
        ...
    };

    player.addEventListener("ended", function() {
        alert("Song is finished!");
        self.next();
    });

}

see the MDN for more info on the this keyword