javascript - HTML5 AudioPlayer Event Action 'Ended' is being call more than One time -

i working html5 audio player. implementing playlist. using 'ended' event action play next audio media file. but, @ end of media file, 'ended' event fired more 1 time. (as message log appears more 1 time.)

this event listener:

    //event listener function addplayerlistener() {     console.log("recording index: "+combinedsessionindex);      var audio = document.getelementbyid("playarea");     audio.addeventlistener('ended', function () {          sessionstoplay = $("#audio_files").val().split(',');          console.log ("in recording end event listener...!!!"+combinedsessionindex);         //it shows length '1' not '0'         if (sessionstoplay.length == 1) {             console.log("returned due session play length..!!!")             return;         }          //as combinedsessionindex starts 1         if (combinedsessionindex == sessionstoplay.length) {             console.log("returned due session play got finish..!!!")             $("#audio_files").val("");             sessionstoplay = [];             combinedsessionindex = 0;             return;         }          var filepath = '${properties["recorded_session_retreival_path"]}';         filepath = filepath + sessionstoplay[combinedsessionindex] + ".mp4";         combinedsessionindex++;                audio.src = filepath;         audio.play();     }, false); } 

so, when particular media file ends, skips next media files , start playing next (after skipping 1,2) file. each skipped media file, control comes in event listener, shows event listener being call repeatedly while single call ends.

for first time play audio file code:

  //playback session function play(data) {      //just deal scenario when play combined session , in mean while start listening other single     //session, after completion of single session, remaining previous combined session should not resume.     //console.log("re-setting player ...!!!");     //$("#audio_files").val("");     //sessionstoplay = [];     //combinedsessionindex = 0;      var filepath = '${properties["recorded_session_retreival_path"]}';     filepath = filepath + data + ".mp4";     console.log("filepath: " + filepath);     if (data == null || data == "") {         alert("nothing play ...!!!");         return;     }     $("#playarea").attr({         "src": filepath,         "autoplay": "autoplay"     }) } 

and after when ends, further clips played using 'ended' event listener.

i unable find reason this. please guide me if doing wrong ?

thanks in advance :)

ahh bad. registering same event listener 'ended' (each time user presses play button, while should single time). that's why getting 'ended' events more 1 time. generates 'ended' event action number of times register 'ended' event.

do not think should consider once ? because our purpose getting notified when media file gets end. there's no logic of notifying multiple times though register multiple times.