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>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++;
}