如何通过函数获取audio.duration值

我的音频播放器我需要获得音轨的持续时间。 我需要一个获取音频的src并返回其持续时间的函数。 这是我想要做的但是不起作用：

function getDuration(src){ var audio = new Audio(); audio.src = "./audio/2.mp3"; var due; return getVal(audio); } function getVal(audio){ $(audio).on("loadedmetadata", function(){ var val = audio.duration; console.log(">>>" + val); return val; }); } 

我试图分成两个function，但它不起作用。 如果它像工作function那样会很棒。

任何的想法？

Answer 1

因为你依赖于一个事件来触发，你不能在getDuration或getVal中返回一个值

相反，你想使用一个回调函数，像这样（回调）

该示例假设您要将持续时间放入这样写的跨度中

---

 function getDuration(src, cb) { var audio = new Audio(); $(audio).on("loadedmetadata", function(){ cb(audio.duration); }); audio.src = src; } getDuration("./audio/2.mp3", function(length) { console.log('I got length ' + length); document.getElementById("duration").textContent = length; }); 

任何需要“知道”长度的代码都应该在回调函数内（console.log所在的位置）

---

使用Promises

 function getDuration(src) { return new Promise(function(resolve) { var audio = new Audio(); $(audio).on("loadedmetadata", function(){ resolve(audio.duration); }); audio.src = src; }); } getDuration("./audio/2.mp3") .then(function(length) { console.log('I got length ' + length); document.getElementById("duration").textContent = length; }); 

---

使用事件 – 注意'myAudioDurationEvent'显然可以（几乎）任何你想要的东西

 function getDuration(src, obj) { return new Promise(function(resolve) { var audio = new Audio(); $(audio).on("loadedmetadata", function(){ var event = new CustomEvent("myAudioDurationEvent", { detail: { duration: audio.duration, } }); obj.dispatchEvent(event); }); audio.src = src; }); } var span = document.getElementById('xyz'); // you'll need to provide better logic here span.addEventListener('myAudioDurationEvent', function(e) { span.textContent = e.detail.duration; }); getDuration("./audio/2.mp3", span); 

虽然，通过将目的地传递到这些解决方案中的修改后的getDuration函数，可以类似地使用回调或承诺来完成 – 如果例如一个跨度更新持续多次，我对使用事件侦听器的观点更合适 – 这个解决方案仍然只有每个跨度只有一次，所以可以用其他方法轻松实现

---

鉴于此答案的评论中的新信息，我认为这是更好的解决方案

 function getDuration(src, destination) { var audio = new Audio(); $(audio).on("loadedmetadata", function(){ destination.textContent = audio.duration; }); audio.src = src; } 

然后根据需要调用getDuration

 var span = createOrGetSomeSpanElement(); getDuration("./audio/2.mp3", span); 

createOrGetSomeSpanElement返回要在getDuration函数中使用的目标元素 – 如何完成此操作由您自己决定，当您在循环中创建播放列表时，我猜您已创建了一些元素来接收已创建的音频长度 – 这很难有时回答半问的问题