CODEWITHSUNDEEP
javascripthtml
Chin
Chin

Reputation: 613

Loop is not working properly

I have create a javascript to change the audio after the audio ended.

var songlist = new Array("a.mp3", "b.mp3", "c.mp3", "d.mp3", "e.mp3", "f.mp3");
var dir = "music/";
var curr_track = 0;
var isfirstrun;

function start()
{
    if(curr_track == songlist.length)
        curr_track = 0;
    var track = document.getElementById('track');
    track.innerHTML = curr_track;
    var audio = document.getElementById('audio');
    isfirstrun = true;
    audio.src = dir+songlist[curr_track];
    audio.load();
    audio.play();
    if(isfirstrun == true)
    {
        audio.addEventListener('ended', function(){ curr_track++; start();}, false); 
        isfirstrun = false;
    }
}

And inside the HTML, 

<body onload="start();">

The track used in the code is to show what is the current track number, and I found out that the output is

0    then    1    then     3     then    7

Hence, it is missing c.mp3, e.mp3 and f.mp3 from the songlist.

How can I solve the problem of the looping?

Upvotes: 0

Views: 91

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Every time the song ends, you are adding another event handler. This is why you see +1, +2, +4 etc. because the number of event handlers doubles each time around.

This is the main reason why I prefer to use audio.onended = function() {curr_track++; start();};

But anyway, to fix this all you have to do is have an "isfirstrun" variable, starting at true, then only add the event listener if it is true and set it to false.

Upvotes: 6

Related Questions