如何获取HTML5音频的播放时长

Question

我在页面中有一个html5的标签，但是我如何知道它的持续时间？

<audio controls="">
    <source src="p4.2.mp3">
</audio>

Answer 1

2020解决方案：

当音频元数据尚未加载时，您将获得undefined或NaN（不是数字）。因此，有些人建议首先使用onloadedmetadata确保音频文件的元数据被获取。此外，大多数人没有提到的是，您必须使用[0]来定位音频DOM元素的第一个索引，像这样：

-- 原生JavaScript：

var audio = document.getElementById('audio-1');
audio.onloadedmetadata = function() {
  alert(audio.duration);
};

如果这不起作用，请尝试以下方法，但这种方法不太可靠，而且依赖于用户的连接：

setTimeout(function () {
    var audio = document.getElementById('audio-1');
    console.log("audio", audio.duration);
}, 100);

-- JQuery：

$(document).ready(function() {
   var audio = $("#audio-1")[0];
   $("#audio-1").on("loadedmetadata", function() {
       alert(audio.duration);
   }); 
});