Cómo obtener la duración de un archivo de audio MP3/WAV en el navegador con JavaScript

Como característica habitual de muchas aplicaciones web que necesitan trabajar con archivos de audio, la duración de un audio es una necesidad crítica, especialmente en aquellas aplicaciones que no requieren todas las propiedades de metadatos de un audio. En este artículo, le explicaremos cómo obtener fácilmente la duración de un archivo de audio usando 2 métodos diferentes en el navegador, programáticamente usando la etiqueta Embed Audio o con la interfaz API AudioContext con JavaScript.

A. Uso de etiqueta de audio

La forma más sencilla de obtener la duración de un archivo de audio es a través de la etiqueta incrustar Audio, que se utiliza para incrustar contenido de sonido en documentos. Puede contener una o más fuentes de audio, representadas mediante el atributo src o el elemento <source> anidado en la etiqueta de audio.

A.1 Lectura de un archivo local

Como primera opción, puede leer el archivo de audio localmente y obtener la duración del audio a través de este método:

// Crear un elemento de audio no asignado a dom
var audio = document.createElement('audio');

// Agregar un detector de eventos de cambio a la entrada del archivo
document.getElementById("fileinput").addEventListener('change', function(event){
    var target = event.currentTarget;
    var file = target.files[0];
    var reader = new FileReader();
  
    if (target.files && file) {
        var reader = new FileReader();

        reader.onload = function (e) {
            audio.src = e.target.result;
            audio.addEventListener('loadedmetadata', function(){
                // Obtenga la duración en segundos del archivo de audio (con milisegundos también, un valor flotante)
                var duration = audio.duration;
            
                // ejemplo 12.3234 segundos
                console.log("La duración de la canción es de: " + duration + " seconds");
                // Alternativamente, simplemente muestre el valor entero con
                // parseInt(duration)
                // 12 seconds
            },false);
        };

        reader.readAsDataURL(file);
    }
}, false); 

A.2 Leer desde una URL web

Alternativamente, si desea obtener la duración de un archivo de audio de una fuente remota (un servidor), es bastante más fácil y más corto que las otras implementaciones:

// Crear un elemento de audio no asignado a dom
var au = document.createElement('audio');

// Defina la URL del archivo de audio MP3
au.src = "https://mydomain.com/myaudio.mp3";

// Una vez cargados los metadatos, muestra la duración en la consola
au.addEventListener('loadedmetadata', function(){
    // Obtenga la duración en segundos del archivo de audio (con milisegundos también, un valor flotante)
    var duration = au.duration;

    // ejemplo 12.3234 seconds
    console.log("La duración de la canción es de:" + duration + " seconds");
    // Alternativamente, simplemente muestre el valor entero con
    // parseInt(duration)
    // 12 segundos
},false);

B. Usando JS AudioContext

La primera opción para recuperar la duración de una canción es a través de la interfaz AudioContext. Esta API representa un gráfico de procesamiento de audio construido a partir de módulos de audio vinculados entre sí, cada uno representado por un AudioNode. Un contexto de audio controla tanto la creación de los nodos que contiene como la ejecución del procesamiento o decodificación de audio. Necesita crear un AudioContext antes de hacer cualquier otra cosa, ya que todo sucede dentro de un contexto.

Le mostraremos cómo obtener la duración usando esta interfaz con 2 ejemplos, leyendo el archivo de audio de una fuente local o una URL web:

B.1 Lectura de un archivo local

Para saber la duración de un archivo de audio que el usuario selecciona en una entrada de tipo de archivo, necesitaremos tener básicamente la entrada del archivo en nuestro marcado, en este caso nuestro id será fileinput:

<input type="file" id="fileinput"/>

Luego, adjuntaremos un detector de eventos a la entrada, de modo que cuando el usuario seleccione un archivo, se activará una devolución de llamada. En esta devolución de llamada, obtendremos el primer archivo cargado y lo almacenaremos en una variable. Crearemos una instancia de la clase FileReader de JavaScript. Esta clase permite que las aplicaciones web lean de forma asincrónica el contenido de los archivos (o búferes de datos sin procesar) almacenados en la computadora del usuario, utilizando objetos File o Blob para especificar el archivo o los datos a leer. Luego, adjunte al evento onload del FileReader una devolución de llamada que contendrá el código importante para obtener la duración del archivo de audio.

Cree una instancia de la API AudioContext y ejecute el método decodeAudioData que recibe como primer argumento el objeto de resultado del evento resultante. Este método también recibe una devolución de llamada que proporciona el objeto de búfer de audio, desde donde puede obtener la duración del audio:

// Agregar un detector de eventos de cambio a la entrada del archivo
document.getElementById("fileinput").addEventListener('change', function(){

    // Obtenga el archivo cargado, puede cambiar la lógica si está trabajando con multiupload
    var file = this.files[0];
    
    // Crear instancia de FileReader
    var reader = new FileReader();

    // Cuando el archivo se haya leído correctamente
    reader.onload = function (event) {

        // Crea una instancia de AudioContext
        var audioContext = new (window.AudioContext || window.webkitAudioContext)();

        // Decodifica de forma asincrónica los datos de archivos de audio contenidos en un ArrayBuffer.
        audioContext.decodeAudioData(event.target.result, function(buffer) {
            // Obtenga la duración en segundos del archivo de audio (con milisegundos también, un valor flotante)
            var duration = buffer.duration;

            // example 12.3234 seconds
            console.log("The duration of the song is of: " + duration + " seconds");
            // Alternativamente, simplemente muestre el valor entero con
            // parseInt(duration)
            // 12 segundos
        });
    };

    // En caso de que no se pueda leer el archivo
    reader.onerror = function (event) {
        console.error("Se produjo un error al leer el archivo:", event);
    };

    // Leer archivo como ArrayBuffer, ¡importante!
    reader.readAsArrayBuffer(file);
}, false);

B.2 Leer desde una URL web

Como alternativa, si el archivo de audio se encuentra en su servidor o en un servidor de terceros, puede simplemente recuperar el archivo con una solicitud AJAX y leerlo y configurar el responseTypecomo arraybuffer, para que pueda obtener fácilmente esta información también:

// Solicitar URL del archivo de audio
var mp3file = "https://mydomain.com/myaudio.mp3";

// Crea una instancia de AudioContext
var audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Abrir una solicitud Http
var request = new XMLHttpRequest();
request.open('GET', mp3file, true);
request.responseType = 'arraybuffer';
request.onload = function() {
    audioContext.decodeAudioData(request.response, function(buffer) {
        // Obtenga la duración en segundos del archivo de audio (con milisegundos también, un valor flotante)
        var duration = buffer.duration;

        // ejemplo 12.3234 segundos
        console.log("La duración de la canción es de:" + duration + " seconds");
        // Alternativamente, simplemente muestre el valor entero con
        // parseInt(duration)
        // 12 segundos
    });
};

// Iniciar solicitud
request.send();

Que te diviertas ❤️!