如何取得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);
   }); 
});