¿Cómo puedo obtener el tiempo de duración del audio html5?

Question

Tengo una etiqueta html5 <audio> en la página, pero ¿cómo puedo saber su duración?

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

Answer 1

Qué navegador está tratando esto? En algunos navegadores, duration no funciona como debería, devolviendo NaN como mencionó.

¿También se asegura de que el archivo de audio se haya cargado antes de intentar recuperar la duración?

Answer 2

Encontré este artículo, podría ser útil.

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

Answer 3

simplemente audioElement.duration

de Dave

Answer 4

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

Answer 5

En un comentario anterior, se mencionó que la solución es vincular un identificador de evento al evento loadedmetadata. Así es como lo hice -

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

Answer 6

He utilizado el evento "canplaythrough" para obtener la duración de la pista. Tengo un caso en el que tengo dos jugadores, y quiero detener al segundo jugador 2 segundos antes de que termine el primero.

$('#' + _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 solución:

Usted recibirá undefined o NaN (no un número) cuando los metadatos de audio no se ha cargado todavía. Por lo tanto, algunas personas sugirieron usar onloadedmetadata para asegurarse de que los metadatos del archivo de audio se busquen primero. Además, lo que la mayoría de la gente no mencionaron es que usted tiene que apuntar el primer índice del elemento DOM audio con [0] así:

- Vainilla Javascript:

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

Si esto no funcionará probar esto, sin embargo no es tan fiable y dependiente de la conexión de los usuarios:

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); 
    }); 
});