音頻時長返回NaN

在Chrome中使用JavaScript訪問HTML5音頻元素（.ogg文件）。該文件確實播放正常，但不知何故它不會識別持續時間。音頻時長返回NaN

我只是這個那兒剽竊代碼：https://www.w3schools.com/jsref/prop_audio_duration.asp（我知道W3Schools的是不是很大，但它似乎像別的東西的問題...）

var x = document.getElementById("testTone").duration; 
console.log("duration:"+x); // duration:NaN 

var y = document.getElementById("testTone"); 
y.play(); // works!

元素...

<audio controls id="testTone"> 
    <source src="autoharp/tone0.ogg" type="audio/ogg"> 
</audio>

來源

2017-06-17 Gregory Tippett

你的'html'看起來像什麼？ – Aravind

，因爲'音頻'需要時間加載，並且在您撥打'.duration'時未準備好。 –

@Aravind在上面添加... –

添加preload="metadata"到您的標籤有它要求元數據的音頻對象：

<audio controls id="testTone" preload="metadata"> 
    <source src="autoharp/tone0.ogg" type="audio/ogg"> 
</audio>

在代碼中，附加一個事件處理程序，設定時間時，metadata has been loaded：

var au = document.getElementById("testTone"); 
au.onloadedmetadata = function() { 
    console.log(au.duration) 
};

來源

2017-06-17 23:47:19 FrankerZ

REF：https://www.stevesouders.com/blog/2013/04/12/ HTML5-video-preload/ 'preload ='metadata' 「提示UA用戶不需要視頻，但需要獲取其元數據（尺寸，第一幀，曲目列表，曲目持續時間等等）是可取的。「' –

好1 + 1對你 –

謝謝！我仍在研究這個，它有幫助。頁面加載顯然有複雜性，我需要更好地理解。一個問題：在評論音頻需要時間加載後，我嘗試用（jQuery）document.ready函數包裝我的原始代碼...沒有工作。你能解釋爲什麼不能？ –

除了@ FrankerZ的解決方案，你也可以做到以下幾點：

<audio controls id="testTone"> 
 
    <source src="https://www.w3schools.com/jsref/horse.ogg" type="audio/ogg"> 
 
    <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg"> 
 
</audio> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 
    function myFunction() { 
 
    var x = document.getElementById("testTone").duration; 
 
    console.log("duration:" + x); // duration:NaN 
 

 
    var y = document.getElementById("testTone"); 
 
    y.play(); // works! 
 
    } 
 
</script>

來源

2017-06-17 23:51:41

這是一個晦澀的解釋w3schools問題的方式嗎？直接的做法會更好...... –

@GregoryTippett在你的代碼中，源代碼也是無效的。 –

@GregoryTippett'preload ='metadata''是一個接近TBO：D –

音頻時長返回NaN

回答

相關問題