Running a While function again, only if specific data has been loaded

Question

I'm trying to get a while function to run again only after it has successfully loaded the length of an external audio file.

The goal is to retrieve the length of each audio file that has been listed in an array.

Right now it only retrieves the length of the last audio file.

I'm assuming this is because it takes a while to get the length of an audio file, while the While function has already jumped to the next loop.

Here's the code:

var myList = [
  'https://mixergy.com/wp-content/audio/Nick-Bolton-Animas-on-Mixergy0721.mp3',
  'https://episodes.castos.com/5e7027dcc7b720-84196812/MicroCOnf-on-Air-Refresh.Ep.6.mp3'
]

var timeNow = 100;
var listLength = 0;


// Get audio file
// Create a non-dom allocated Audio element
var au = document.createElement('audio');


var i = 0;

while(i < (myList.length-1)) {
  // Define the URL of the MP3 audio file
  au.src = myList[i];
    console.log(myList[i])
    console.log(i)
    listLength = Math.round(au.duration);

  // Once the metadata has been loaded, display the duration in the console
  au.addEventListener('loadedmetadata', function(){
  // Obtain the duration in seconds of the audio file
  listLength = Math.round(au.duration);

    console.log(listLength)

  },false);

  i++;

}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>


    <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
    <script src="script.js" charset="utf-8"></script>
  </body>
</html>

Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — outis, Sep 14 '21 at 08:40

score 1 · Accepted Answer · edited Sep 14 '21 at 12:59

This is because the function keep reference to the same variable au which changes, so when loadmetadata method is executed it uses the latest element. You should use a function and in this case au variable will become local to that function, something similar to this:

function checkLength(src) {
  var au = document.createElement('audio');
  au.src = src;
  listLength = Math.round(au.duration);

  // Once the metadata has been loaded, display the duration in the console
  au.addEventListener('loadedmetadata', function(){
    // Obtain the duration in seconds of the audio file
    listLength = Math.round(au.duration);

    console.log(listLength)

  },false);

}

var myList = [
  'https://mixergy.com/wp-content/audio/Nick-Bolton-Animas-on-Mixergy0721.mp3',
  'https://episodes.castos.com/5e7027dcc7b720-84196812/MicroCOnf-on-Air-Refresh.Ep.6.mp3'
]

var timeNow = 100;
var listLength = 0;


// Get audio file
// Create a non-dom allocated Audio element
var i = 0;

while(i < (myList.length-1)) {
  // Define the URL of the MP3 audio file
  checkLength(myList[i]);
  i++;
}

Running a While function again, only if specific data has been loaded

1 Answers1