javascript iterating through array at certain point

[7331]

I am trying to iterate through a playlist, but not skip to the next item until the current song is done playing or until a new song in the playlist is chosen. Currently my array is iterated, but does not wait for the current song to finish playing.HTML:\[code\]<li mp3="song1.mp3"></li><li mp3="song2.mp3"></li><li mp3="song3.mp3"></li><li mp3="song4.mp3"></li>\[/code\]JavaScript:\[code\]var player = new MediaElementPlayer('audio');playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3', 'song4.mp3'];$('li').click(function() { for (var i = playlist.indexOf($(this).attr('mp3')); i < playlist.length; i++) { player.setSrc(playlist); player.play(); player.addEventListener('ended', function(e) { player.setSrc(playlist); player.play(); }, false); }});\[/code\]