0

Estoy haciendo un reproductor de audio web el cual optiene todas las canciones de un directorio y las muestra en pantalla, reproduce, etc. Mi problema consiste en que no e logrado obtener la duracion del audio sin usar una etiqueta audio o video. Estas dos funcionan pero empeora la UX pues sin usar la etiqueta audio para cargar el audio y traer su duracion, la carga de 47 canciones tarda poco menos de 40s en cambio al hacer uso de una etiqueta audio que lo cargue y me traiga la informacion de cada uno esto tarda mas de 5 minutos, lo cual es bastante lento. Quisiera encontrar una forma de hacer esto, pues con java hago uso de

long duration = Long.parseLong(mdr.extractMetadata(MediaMetadataRetriever.METADATA_KEY_DURATION));

y obtengo esto, mas con javascript no encuentro la forma de obtener esta información y la necesito. Agradezco sus respuetas

0

1 respuesta 1

0

No hay forma de saber la duracion de un audio hasta que como minimo se haya cargado su metadata.

por ende, puedes setear el atributo preload en su valor metadata si solo requieres extraer informacion como el nombre, la duracion, el tipo mime etc.

Setear una etiqueta audio/video con su atributo preload en su valor metadata hara que solo se cargue la metadata del recurso. por ende la respuesta es tan sencilla como hacer esto:

HTML:

<audio src = "recurso.wav" preload = "metadata"></audio>

Javascript:

En caso de que tu crees audios o videos pero desde javascript para no contaminar el DOM entonces puedes hacer lo siguiente desde JS fijate como usamos el evento loadedmetadata pertenenciente a la etiqueta HTMLMediaElement y ademas el atributo preload seteado en metadata para asi solo cargar los metadatos.

Ademas, es muy importante realizar la carga DESPUES de haber añadido el evento loadedmetadata a nuestra etiqueta video.

window.onload = ()=>{

  const archivos = document.getElementById("archivos");
  
  function handleFiles(ev){
    const video = document.createElement("video");
    video.preload = "metadata";
    video.onloadedmetadata = ()=> console.log(video.duration);
    video.onloadend = ()=> URL.revokeObjectURL(video.src);
    video.src = URL.createObjectURL(ev.target.files[0]);
  }
  
  archivos.addEventListener("change", handleFiles);

}
<input type = "file" id = "archivos">

De esta manera la carga de la información que te interesa se acelera muchisimo, pues javascript solo tendra que cargar la metadata.

Sin embargo la desventaja de esto es que por supuesto no podras usar la data que es del elemento en si debido a que solo estas cargando su metadata.

Si quieres cargar el archivo completo y a la vez poder extraer información cuando este disponible deberás modificar un poco lo que hice, ademas de NO usar algo como FileReader para leer la información, ya que la carga de la información sera muchisimo mas lenta mediante sus metodos, vamos por pasos:

1.) Setear el atributo preload en auto o en none, (si lo seteas en none deberas luego ejecutar la funcion load() para que se cargue el video/audio).

2.) Añadirle al elemento HTML el evento loadend y loadedmetadata ANTES de cargarlo.

3.) Para cargar la informacion (src) del video/audio no uses el FileReader en vez de ello usa los metodos URL.createObjectURL y URL.revokeObjectURL, el primero usalo para cargar la informacion por medio del File, el segundo usalo en el metodo loadend si no necesitas ya la informacion para asi liberar memoria, ademas ten en cuenta que esta informacion solo existira y seguira existiendo si el HTML hace uso de ella, porque en caso contrario sera descartado automaticamente por el navegador.

4.) Para obtener la metadata dentro del metodo loadedmetadata es donde deberas extraer la informacion del video/audio, NO podras hacerlo en ninguna otra parte.

Nota: en tu caso quieres cargar audios, pero enrealidad los audios pueden ser cargados tambien desde una etiqueta video por ende he preferido usar una etiqueta video.

Nota 2: la duracion de un video/audio esta estimada en segundos (s).

Nota 3: los formatos aceptados para un audio son limitados, no funcionara en todos los casos, ya que poder extraer esa informacion dependera de si el elemento soporta la carga de ese formato.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.