HTML5的HTML5持續時間有時有效

Question

我在顯示HTML5音頻播放器中MP3文件的持續時間時出現問題。有時它會加載持續時間，有時不會。

它不加載的時間是當我更改CSS和刷新頁面時。

當我改變MP3文件加載另一個MP3文件時，持續時間顯示。當我刷新頁面時，它會消失。

這是持續時間代碼：

audio.addEventListener('loadedmetadata', function(){ 
    progress.setAttribute('max', Math.floor(audio.duration)); 
    duration.textContent = toHHMMSS(audio.duration); 
}); 

我是新的JavaScript時，所以我不知道如何編寫代碼。我從https://codepen.io/davatron5000/pen/uqktG使用此代碼，當您刷新頁面時，mp3文件的持續時間消失。

Answer 1

這可能是因爲緩存。

如果您將音頻的src設置爲標記（html），則在附加事件偵聽器時，媒體的緩存版本可能已經加載*。

因此事件處理程序永遠不會閃光：

window.onload = function(){ // kinda force the situation 
 

 
    aud.onloadedmetadata = function(e){ // this won't fire 
 
    console.log('metatadata loaded'); 
 
    }; 
 
    };

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud"/>

但是在這種情況下，你已經可以訪問其duration。
所以你只需要檢查其持續時間：

window.onload = function() { 
 
    if (aud.duration) { 
 
    doSomething(); 
 
    } else { 
 
    aud.onloadedmetadata = doSomething; 
 
    } 
 
} 
 

 
function doSomething(event) { 
 
    console.log(aud.duration); 
 
    console.log('from event handler :', !!event); 
 
}

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud" />

或者你可以重新設置你的媒體SRC在JS。

window.onload = function() { 
 
    aud.onloadedmetadata = function doSomething(event) { 
 
    console.log(aud.duration); 
 
    } 
 

 
    aud.src = aud.src; // forces the event to fire again 
 
}

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud" />

* UA具有不同的行爲這一點，e.g FF將存儲所有的負載事件，直到所有的內嵌腳本已經被解析。 Safari瀏覽器，有時Chrome會盡快啓動它。