javascript - Running a While function again, only if specific data has been loaded
问题描述
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++;
}
推荐阅读
- python - Python - 按其属性对链接列表进行排序
- python - Python中列表列表的反转
- excel - 在 Excel 中将行转换为列
- php - 尝试切断和执行 PHP 生成的 bash 脚本时出现换行问题
- android - PWA 具有持久的 Chrome 通知
- macos - 从 mac 卸载 atom
- jenkins - 在 Jenkinsfile 中签出 scm
- alamofire - Alamofire.download 通过邮寄方式下载,参数不起作用
- angular - 在Angular中单击父组件按钮时验证子组件表单
- java - 如何在spring项目中使用关系路径制作文件对象