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í][1]][1] 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í][2]][2] 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í][3]][3] 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 <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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(); <!-- language: lang-html --> <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"> <!-- end snippet --> ### 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í][4]][4] Para esto ocuparé [CSS Houdini][5], lamentablemente este método no es [compatible][6] con todos los navegadores y tampoco lo es con Stackoverflow, así que el botón "ejecutar" no funciona. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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(); <!-- language: lang-html --> @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); } } <!-- end snippet --> [1]: https://i.sstatic.net/vRBvT.png [2]: https://i.sstatic.net/iZfbv.png [3]: https://i.sstatic.net/cVTfY.png [4]: https://i.sstatic.net/BRPp5.png [5]: https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini [6]: https://ishoudinireadyyet.com/