Come posso ottenere il tempo di durata del file html5

Question

Ho un tag html5 <audio> nella pagina, ma come posso sapere la sua durata?

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

Answer 1

Quale browser stai tentando questo su? Su alcuni browser duration non funziona come dovrebbe, restituendo NaN come hai menzionato.

Inoltre, si sta verificando che il file audio sia stato caricato prima di tentare di recuperare la durata?

Answer 2

Ho trovato questo articolo, potrebbe essere utile.

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/

Answer 3

semplicemente audioElement.duration

Dave

Answer 4

var au = document.createElement('audio'); 
au.addEventListener('loadedmetadata',function(){ 
    au.setAttribute('data-time',au.duration); 
},false); 

Answer 5

In un commento sopra, è stato menzionato che la soluzione è associare un handle di evento all'evento loadedmetadata. Ecco come l'ho fatto -

audio.onloadedmetadata = function() { 
    alert(audio.duration); 
}; 

Answer 6

Ho usato l'evento "canplaythrough" per ottenere la durata della traccia. Ho un caso in cui ho due giocatori e voglio fermare il secondo giocatore 2 secondi prima che il primo sia completo.

$('#' + _currentPlayerID).on("canplaythrough", function (e) { 
    var seconds = e.currentTarget.duration;  
    var trackmills = seconds * 1000; 
    var subTimeout = trackmills - 2000; //2 seconds before end 

    //console.log('seconds ' + seconds); 
    //console.log('trackmills ' + trackmills); 
    //console.log('subTimeout ' + subTimeout); 

    //Stop playing before the end of thet track 
    //clear this event in the Pause Event 
    _player2TimeoutEvent = setTimeout(function() { pausePlayer2(); }, subTimeout); 

}); 

Answer 7

2018 soluzione:

Otterrete undefined o NaN (non un numero) quando i metadati audio non è ancora caricato. Pertanto alcune persone hanno suggerito di utilizzare onloadedmetadata per assicurarsi che i metadati del file audio vengano recuperati per primi. Inoltre, ciò che la maggior parte delle persone non ha menzionato è che si deve indirizzare il primo indice dell'elemento DOM audio con [0] come questo:

- Vanilla Javascript:

var audio = $("#audio-1")[0]; 
audio.onloadedmetadata = function() { 
    alert(audio.duration); 
}; 

Se questo non funziona provare questo, tuttavia, non così affidabile e dipendente sulla connessione degli utenti:

setTimeout(function() { 
    var audio = $("#audio-1")[0]; 
    console.log("audio", audio.duration); 
}, 100); 

- JQuery:

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