Using caller reference (this) using HTML5 audio and jQuery
I am creating my own HTML5 audio player capable of handling playlists. I created a custom object myPlaylist
that contains all the play()
, pause()
, stop()
and other necessary functions. This all works correctly, but more than that, I need to know when the audio file 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 this. I have tried several combinations already, for example $(this).next()
which seems the most reasonable and actually displays a warning but then does nothing, and also this.next()
which also displays a warning but then shows an error as it this
refers to an HTML5 audio element that has no function next()
.
I also tried a different approach using
audio.onended = function(){
alert("Song is finished!");
$(this).next();
};
But that doesn't even trigger a warning. Also audio.ended
doesn't work.
So, I basically don't know, does anyone know what I'm doing wrong? Thanks in advance.
Oh, and I've tested it all on the latest versions of Google Chrome and Safari on Mac OS X.
EDIT Following the guidelines given in the HTML5 audio playlist - how to play the second audio file after the first ending? , 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, although the first one shows the warning as expected.
EDIT 2 Using search, I came across this question , which may also have something to do with my problem, so in order to get rid of any possible problems with referencing this
, I added a new variable referring to the object itself, so now I I mainly work 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 stating that Object has no method next()
.
I don't know what else I can try ... Any additional information would be much appreciated, thanks!
source to share
is there an example HTML5 playlist handling event ended
here , if that helps?
in the event handler you are referring to this
, but in this context is this
referring to the DOM element that caught the event, i.e. your element audio
.. 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();
});
}
source to share