title: JQuery - loadedmetadata listener within for loop
body: <p>I'm trying to create a loop to get the durations of different audio tracks taken from an array in jQuery. It appears like adding an event listener within the loop overrides the second statement of the for, looping indefinitely and causing the browser to crash.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>var trackSources = new Array();
  trackSources[0] = "music/haken.mp3";
  trackSources[1] = "music/Drive home.mp3";
  trackSources[2] = "music/Luminol.mp3";
  
  var audioPlaylist = document.createElement("audio");
  audioPlaylist.preload = "metadata";
  
  function getDurations() {
  
      var max = trackSources.length;
  
      for (var i=0; i &lt; max ; )
      {
          audioPlaylist.src = trackSources[i];
  
          audioPlaylist.addEventListener('loadedmetadata', function() {
              trackDuration= audioPlaylist.duration;
              alert(trackDuration);
              i++;
          }, false);
  
      }
  
  }
  </code></pre>
  
  <p>Is there any way to work it out? Thanks!</p>