HTML5 Dauer der Zeit von MP3 funktioniert manchmal

Question

Ich habe Probleme, die Dauer einer MP3-Datei in meinem HTML5 Audio-Player anzuzeigen. Manchmal lädt es die Dauer, manchmal nicht.

Die Zeiten, die es nicht lädt, ist, wenn ich Änderungen am CSS mache und wenn ich die Seite aktualisiere.

Wenn ich die MP3-Datei ändere, um eine andere MP3-Datei zu laden, wird die Dauer angezeigt. Es geht weg, wenn ich die Seite aktualisiere.

Dies ist der Code für die Dauer der Zeit:

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

ich JavaScript neu bin, so habe ich keine Ahnung, wie zu kodieren. Ich verwende diesen Code von https://codepen.io/davatron5000/pen/uqktG und wenn Sie die Seite aktualisieren, verschwindet die Dauer der MP3-Datei.

Answer 1

Dies ist wahrscheinlich wegen Cache.

Wenn Sie den src Ihres Audios im Markup (html) einstellen, ist die zwischengespeicherte Version Ihres Mediums möglicherweise bereits * geladen, wenn Sie den Ereignislistener anhängen.

Daher Ereignishandler wird nicht immer Feuer:

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"/>

Aber in diesem Fall können Sie bereits Zugriff auf seine duration.
So müssen Sie nur für die Dauer überprüfen:

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" />

Oder Sie können wieder in js Ihre Medien src gesetzt.

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" />

* UAs haben unterschiedliche Verhalten für diese, beispiels FF alle Last Ereignisse speichert, bis alle Inline-Scripts analysiert wurde. Safari und manchmal Chrome feuern es so schnell wie möglich ab.