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

reproductor audio html5 playlist

Question

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

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

Answer 1

¿En qué navegador estás intentando esto? En algunos navegadores, la duration no funciona como debería, devolviendo NaN como mencionaste.

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

Answer 2

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 3

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

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

Answer 4

Usé 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 5

simplemente audioElement.duration

Dave

Answer 6

Solución 2018:

Obtendrá undefined o NaN (no un número) cuando los metadatos de audio aún no estén cargados. Por lo tanto, algunas personas sugirieron usar los metadatos de onloadedmetadata en onloadedmetadata para asegurarse de que los metadatos del archivo de audio se obtengan primero. Además, lo que la mayoría de la gente no mencionó es que debe apuntar al primer índice del elemento DOM de audio con [0] como este:

- Vainilla Javascript:

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

Si esto no funciona, intente esto, pero no tan confiable y depende 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);
});
});

Answer 7

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