Use of reference to calling object (this) using HTML5 audio and jQuery

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!

event names in Chrome and Safari usually are not starting with an on (like in audio.onended), that looks more like IE to me. Have you tried audio.ended for your second example? — marue, Mar 10 '12 at 21:11
Yes, I've tried that as well with the same outcome, the alert is not shown. But I didn't know the event names depend on the browser. Thanks for the tip. — carlos.perezb, Mar 10 '12 at 22:24

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

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

edited May 23 '17 at 11:48

Community

1
1

answered Mar 10 '12 at 22:18

Lloyd

8,204
2
38
53

Thank you, I hadn't seen that one. I've tried using the options mentioned there but do not seem to work either. I'll edit the question with the new info. – carlos.perezb Mar 10 '12 at 22:38
I think both are correct, but in any case, it doesn't work either :S – carlos.perezb Mar 11 '12 at 14:23
Oh! It works using that!! I was just trying the same but using jQuery, i.e. var me = $(this); and it didn't work, but it works with your code! Thank you very much! – carlos.perezb Mar 11 '12 at 14:59
ok, cool.. you need to tread carefully using the keyword `this` in javascript.. check out the Mozilla docs on `this`: https://developer.mozilla.org/en/JavaScript/Reference/Operators/this – Lloyd Mar 11 '12 at 15:07
Thanks for the link, will come in handy. By the way, as I mentioned before it works when the function has a name, i.e. I kept using `this.next = function next(){...}', so that doesn't really affect the result. – carlos.perezb Mar 11 '12 at 15:36

Use of reference to calling object (this) using HTML5 audio and jQuery

1 Answers1

Linked