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.
Si no tiene ningún archivo de audio a mano, puede descargar rápidamente alguna canción libre de derechos de autor de un sitio web como Puma Studios aquí .
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 responseType
como 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 ❤️!
Conviertete en un programador más sociable