Skip to main content
2 de 2
se añadieron 5391 caracteres en el cuerpo
Yussef
  • 23.4k
  • 4
  • 12
  • 29

Según entiendo quieres que en un momento las canciones se intersecten y que al principio y final de cada canción exista una variación del volumen

introducir la descripción de la imagen aquí

Al intervalo donde existirá la variación de volumen le vamos a llamar: "Fader_Duration"

Luego tenemos que entender el asunto del volumen, donde existen hasta 3 distintos:

  • Actual: Es el volumen que setea el usuario mediante un input range
  • Audio1: Volumen del audio 1
  • Audio2: Volumen del audio 2

Audio1 y Audio2 sufren modificación según el currentTime del audio. Esta modificación está condicionada al volumen actual.

Por ejemplo, si definieras que el fading llega hasta el volumen 0.2, pero el volumen actual es de 0.1, le estarías subiendo el volumen al usuario, cosa que no es lo que se desea. Entonces la ecuación para determinar el volumen y el fading de un audio debe tener como variable el volumen actual.

1) Método por javascript

Con este método obtendremos una variación lineal

Donde creé la siguiente estructura:

const Volumen = {
    Actual : 0.5, //El indicado por el usuario
    Fader_Duration: 5, // En segundos
    Fader_Hasta: 0.3, //disminuimos el volumen hasta 0.3
}

donde Fader_hasta indica que el volumen lo subimos al principio desde 0.3 hasta el volumen actual. Y al final del audio desde el actual hasta Fader_hasta. Puedes colocar desde 0 a 1.

Debemos considerar que el volumen de un audio se comportará de la siguiente manera:

introducir la descripción de la imagen aquí

Donde podemos separar el comportamiento en 3 funciones lineales

Y acá aplicamos algo de matemáticas: La fórmula de una función lineal está dada por: y = mx + b Donde:

  • y: Sería el volumen
  • x: El tiempo
  • b: el offset en el eje y
  • m: La pendiente, es decir la variación del volumen en un intervalo de tiempo, la cual tiene la siguiente formula:

introducir la descripción de la imagen aquí

Entonces nuestra primera función lineal es: (recuerda que Actual es el volumen seteado por el usuario)

  • m = (Actual - Fader_Hasta ) / Fader_Duration
  • x = currentTime
  • b = Fader_Hasta

La segunda función, no tiene pendiente, siempre es el volumen actual

La tercera función es:

  • m = ( Fader_Hasta - Actual ) / Fader_Duration
  • x = Fader_Duration - (duracion - currentTime)
  • b = Actual

Ya con esto, completamos la estructura:

const Volumen = {
    Actual : 0.5, //El indicado por el usuario
    Fader_Duration: 5, // En segundos
    Fader_Hasta: 0.3, //disminuimos el volumen hasta 0.3

    GetVolumen: function(duracion, currentTime) {
        
        if (isNaN(duracion) || isNaN(currentTime)) {
            return 0;
        }
        if ( currentTime  <= this.Fader_Duration) {
            return (  currentTime * ( this.Actual  - this.Fader_Hasta ) / this.Fader_Duration ) + this.Fader_Hasta;
        }
        else if (duracion  - currentTime  <= this.Fader_Duration) {
       
             return ( (this.Fader_Duration -  (duracion  - currentTime) ) * ( this.Fader_Hasta  - this.Actual ) / this.Fader_Duration ) + this.Actual;
        }
        else {
            return this.Actual;
        }
    }
};

Entonces la función Volumen.GetVolumen, es que la función que tu necesitabas. Esta recibe como parámetros la duración del audio y el tiempo actual del audio. Y devuelve el volumen que debe tener,

El resto del código con algunos cambios menores

var Lista = [
    {
        URL : "https://storage.googleapis.com/media-session/sintel/snow-fight.mp3",
        Titulo :"TEST UNO"
    },
    {
        URL : "https://storage.googleapis.com/media-session/big-buck-bunny/prelude.mp3",
        Titulo : "TEST DOS"
    }];

const Titulo_label = document.getElementById("titulo"); //Titulo del audio
const Time_label = document.getElementById("time");
const Volume_control = document.getElementById('volume');

let play2 = false;
let volumen_actual = 1;

const Volumen = {
    Actual : 0.5, //El indicado por el usuario
    Fader_Duration: 5, // En segundos
    Fader_Hasta: 0.3, //disminuimos el volumen hasta 0.3

    GetVolumen: function(duracion, currentTime) {
        
        if (isNaN(duracion) || isNaN(currentTime)) {
            return 0;
        }
        if ( currentTime  <= this.Fader_Duration) {
            return (  currentTime * ( this.Actual  - this.Fader_Hasta ) / this.Fader_Duration ) + this.Fader_Hasta;
        }
        else if (duracion  - currentTime  <= this.Fader_Duration) {
       
             return ( (this.Fader_Duration -  (duracion  - currentTime) ) * ( this.Fader_Hasta  - this.Actual ) / this.Fader_Duration ) + this.Actual;
        }
        else {
            return this.Actual;
        }
    }
};
function time_convert(num)
{ 
    if (isNaN(num)) {
        return "00:00";
    }
    var hours = Math.floor(num / 60);  
    var minutes = num % 60;
    return hours + ":" + minutes;         
}
function aleatorio(){
    return Math.round(Math.random() * (Lista.length - 1));
}

function Init() {
    Volumen.Actual = Volume_control.value / 100;

    //Cambio input por change, para que el cambio de volumen se refleje al instante
    Volume_control.addEventListener("input", function(e) {
        Volumen.Actual = e.currentTarget.value / 100;
    });

    
    let listado = document.getElementById("listado");
    for (let x of Lista){
        let item = document.createElement("li");
        item.innerHTML = x.Titulo;
        listado.appendChild(item);
    }
}

function mostrarProgreso(duration, currentTime) {
    let time1 = parseInt(currentTime)
    let time2 = parseInt(duration)
    Time_label.innerHTML = time_convert(time1) + "/" + time_convert(time2);
}

function cargarCancion(numero) {
    // Carga la canción de forma dinámica
    var source = new Audio(Lista[numero].URL);
    source.load();
    source.play();
    Titulo_label.innerHTML = Lista[numero].Titulo;

   
    source.addEventListener('ended', () => play2=false);
    source.addEventListener('timeupdate', (event) => {

        source.volume = Volumen.GetVolumen(source.duration, source.currentTime);

        if (source.duration - source.currentTime <= Volumen.Fader_Duration) {
            if (!play2) {
                cargarCancion(aleatorio()); // Si no, carga la siguiente canción
                play2 = true; //ya hay dos!
            }
            mostrarProgreso(source.duration, source.currentTime);
        }
        else if (!play2) {
            mostrarProgreso(source.duration, source.currentTime);
        }
        console.log(Lista[numero].Titulo,  time_convert(parseInt(source.currentTime)) + "/" + time_convert(parseInt(source.duration)), source.volume)
    });
}

Init();
<h3>
<div id="titulo"></div>
</h3>
<button id="play" onclick="cargarCancion(1);">Play</button>
<ul id="listado"></ul>
<div id="time"></div>
<input type="range" min="0" max="100" id="volume">

2) Método alternativo por CSS

Con este método usamos CSS (animaciones) para la obtener la variación, el beneficio de este método es que podemos hacer que la variación a modo de curva, es decir podríamos hacer que empiece a disminuir el volumen lentamente y que llegando al final aumente más rápido

introducir la descripción de la imagen aquí

Para esto ocuparé CSS Houdini, lamentablemente este método no es compatible con todos los navegadores y tampoco lo es con Stackoverflow, así que el botón "ejecutar" no funciona.

var Lista = [
    {
        URL : "https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3",
        Titulo :"TEST UNO"
    },
    {
        URL : "https://storage.googleapis.com/media-session/big-buck-bunny/prelude.mp3",
        Titulo : "TEST DOS"
    }];

const Titulo_label = document.getElementById("titulo"); //Titulo del audio
const Time_label = document.getElementById("time");
const Volume_control = document.getElementById('volume');

let play2 = false;

const Volumen = {
    Actual : 0.5, //El indicado por el usuario
    Fader_Min: 0, // Porcetaje de volumen al minimo
    Fader_Max: 1, // Porcetaje de volumen al máximo
    Fader_Duracion: 5 //en segundos
};
function time_convert(num)
{ 
    if (isNaN(num)) {
        return "00:00";
    }
    var hours = Math.floor(num / 60);  
    var minutes = num % 60;
    return hours + ":" + minutes;         
}
function aleatorio(){
    return Math.round(Math.random() * (Lista.length - 1));
}

function Init() {
    Volumen.Actual = Volume_control.value / 100;

    //Cambio input por change, para que el cambio de volumen se refleje al instante
    Volume_control.addEventListener("input", function(e) {
        Volumen.Actual = e.currentTarget.value / 100;
    });

    
    let listado = document.getElementById("listado");
    for (let x of Lista){
        let item = document.createElement("li");
        item.innerHTML = x.Titulo;
        listado.appendChild(item);
    }
}

function mostrarProgreso(duration, currentTime) {
    let time1 = parseInt(currentTime)
    let time2 = parseInt(duration)
    Time_label.innerHTML = time_convert(time1) + "/" + time_convert(time2);
}

function cargarCancion(numero) {
    // Carga la canción de forma dinámica
    var source = new Audio(Lista[numero].URL);
  
    source.setAttribute("controls", "true");
    source.style.setProperty("--desde",Volumen.Fader_Min);
    source.style.setProperty("--hasta", Volumen.Fader_Max);
    source.style.setProperty("animation", "faderIn " + Volumen.Fader_Duracion+ "s ease-in-out");
    document.querySelector("body").appendChild(source);

    source.load()
    source.play();
    Titulo_label.innerHTML = Lista[numero].Titulo;

   
    source.addEventListener('ended', () => {
        play2 = false;
        source.remove();
    } );

    source.addEventListener('timeupdate', (event) => {
       source.volume = Volumen.Actual * getComputedStyle(source).getPropertyValue("--porcentaje");

        if (source.duration - source.currentTime <= Volumen.Fader_Duracion) {
            
            if (!play2) {
                source.style.setProperty("animation", "faderOut " + Volumen.Fader_Duracion+ "s ease-in-out");
                cargarCancion(aleatorio()); // Si no, carga la siguiente canción
                play2 = true; //ya hay dos!
            }
            mostrarProgreso(source.duration, source.currentTime);
        }
        else if (!play2) {
            mostrarProgreso(source.duration, source.currentTime);
        }
        console.log(Lista[numero].Titulo,  time_convert(parseInt(source.currentTime)) + "/" + time_convert(parseInt(source.duration)), source.volume)
   
    });
}

Init();
@property --porcentaje {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --desde {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
}

@property --hasta {
    syntax: "<number>";
    initial-value: 1;
    inherits: true;
}

audio {
    --porcentaje: var(--porcentaje);
    width: 0;
    animation-fill-mode: forwards !important;
    display: block;
}

@keyframes faderIn {
    from {
        --porcentaje: var(--desde);
    }
    to {
        --porcentaje: var(--hasta);
    }
}
@keyframes faderOut {
    from {
        --porcentaje: var(--hasta);
    }

    to {
        --porcentaje: var(--desde);
    }
}

Yussef
  • 23.4k
  • 4
  • 12
  • 29