6

Estoy necesitando agregar una barra de volumen a mi reproductor javascript, y lo he intentado de esta manera:

    //Slider control de volumen
    let volume = document.getElementById('volume');
    volume.addEventListener("change", function(e) {
        source.volume = e.currentTarget.value / 100;
  })
<input type="range" id="volume">

El problema que se me presenta es que el volumen una vez se ajusta, funciona correctamente, pero cuando hace el fader entre canciones, el volumen deja de estar activo tal y como se ha ajustado, mi pregunta es, como puedo lograr que el volumen una vez ajustado desde la barra, este sea constante una vez que se produce el cambio de canciones?, es posible? dejo código del reproductor:

let play2 = false;
const fading= 10; // segundos de crossfading

function time_convert(num)
 { 
  var hours = Math.floor(num / 60);  
  var minutes = num % 60;
  return hours + ":" + minutes;         
}

function cargarCancion(numero) {
    // Carga la canción de forma dinámica
  var source = new Audio(lista[numero][0]);
  source.load();
  source.play();
  var titulo = document.getElementById("titulo");
  titulo.innerHTML = lista[numero][1];
  
  //mientras esta sonando...
  
  source.addEventListener('timeupdate', (event) => {
  let time1 = parseInt(source.currentTime)
  let time2 = parseInt(source.duration)
   document.getElementById("time").innerHTML = 
   time_convert(time1) + "/" + time_convert(time2);


    //let volume = 1; //max
    //Slider control de volumen
    let volume = document.getElementById('volume');
    volume.addEventListener("change", function(e) {
        source.volume = e.currentTarget.value / 100;
    })
    
    // si estamos empezando y hay dos canciones sonando, 
    // el volumen empieza en cero y va subiendo
    if (source.currentTime < fading && play2) {
      volume = source.currentTime / fading;
      console.log('Volumen subiendo');
    } else if (source.currentTime > (source.duration - fading)) {
      // ¿Ha empezado otra canción?
      if (!play2) {
        cargarCancion(aleatorio()); // Si no, carga la siguiente canción
        play2 = true; //ya hay dos!
      }
      // estamos bajando el volumen...
      volume = 1 - (source.duration - source.currentTime) / fading;
      console.log('Volumen bajando');
    }
    source.volume = volume;
  });
  //canción terminada, no hay dos canciones a la vez sonando
  source.addEventListener('ended', () => play2=false);
}

function aleatorio(){
    return Math.round(Math.random() * (lista.length - 1));
}

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

// Fin listado

let listado = document.getElementById("listado");
for (let x of lista){
    let item = document.createElement("li");
    item.innerHTML = x[1];
    listado.appendChild(item);
}
<h3>
<div id="titulo"></div>
</h3>
<button id="play" onclick="cargarCancion(aleatorio());">Play</button>
<ul id="listado"></ul>
<div id="time"></div>
<input type="range" id="volume">

Gracias y espero una ayuda o sugerencia

5
  • Sí, es posible, basta con guardar su estado y aplicarlo cada vez que una nueva reproducción sucede. Commented el 14 sept. 2022 a las 18:04
  • En mi caso, me puedes dar un ejemplo? Commented el 14 sept. 2022 a las 18:29
  • 1
    Te sirve una solución donde cambie gran parte del código?? Por otro lado, el efecto que quieres lograr es que al final de una canción baja el volumen y al comienzo de la siguiente suba hasta llegar al volumen seteado??
    – Yussef
    Commented el 18 sept. 2022 a las 6:46
  • Asi es, cualquier solución me vale, yo lo he probado con localstorage y con sesiones en PHP y no me ha funcionado. El efecto es hacer un fader de unos segundos al final de cada canción tal y como muestro aqui. Gracias Yussef por el interés Commented el 18 sept. 2022 a las 9:48
  • 1
    El problema está en el código que hace la transición (fade) entre canciones, porque siempre asume que empieza desde el máximo y termina en cero y que luego comienza de cero y termina en el máximo. Debes adaptar la fórmula que uses para ponderarla con el valor de volume.value.En un rato te muestro un ejemplo. Commented el 19 sept. 2022 a las 6:20

3 respuestas 3

10
+50

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);
    }
}

1
  • Magnifico!!! y además me has sorprendido con la implementación en CSS, desconocía que se puede ajustar la curva del fader de entrada. Te dejo la recompensa y gracias mil por tu tiempo!!! Commented el 19 sept. 2022 a las 17:28
4

Hay que corregir dos cosas en tu código. Una es la manera en la que gestionas el volumen en curso para ajustar las transiciones a él. La otra es la manera en la que bajas el volumen, estás calculando mal el desvanecimiento.

Para corregir la primera debes obtener adecuadamente el valor del volumen actual mediante la siguiente instrucción:

let inputVolumen = document.getElementById('volume').value / 100;

De modo que al final esta asignación sea coherente:

source.volume = inputVolumen;

Y ahora podemos calcular el volumen multiplicando lo mismo que calculabas antes por el máximo que podrá alcanzar:

inputVolumen = (source.currentTime / fading) * inputVolumen;

Y también:

inputVolumen = ((source.duration - source.currentTime) / fading) * inputVolumen;

Fíjate que esta última línea te la he cambiado y le he quitado el 1 - que tenías, ya que al ir avanzando hacia la duración, el valor va disminuyendo, por lo que no es necesario hacer el 1 - al valor calculado.

Para comprobar esto último he agregado a los console.log el valor del volumen para que veas que ahora sí que se reduce paulatinamente y si le agregas tu resta anterior lo que hace es subir.

Puedes ver el código funcionando a continuación:

let play2 = false;
const fading = 10; // segundos de crossfading

function time_convert(num)
 { 
  var hours = Math.floor(num / 60);  
  var minutes = num % 60;
  return hours + ":" + minutes;         
}

function cargarCancion(numero) {
    // Carga la canción de forma dinámica
  var source = new Audio(lista[numero][0]);
  source.load();
  source.play();
  var titulo = document.getElementById("titulo");
  titulo.innerHTML = lista[numero][1];
  
  //mientras esta sonando...
  
  source.addEventListener('timeupdate', (event) => {
  let time1 = parseInt(source.currentTime)
  let time2 = parseInt(source.duration)
   document.getElementById("time").innerHTML = 
   time_convert(time1) + "/" + time_convert(time2);


    //let volume = 1; //max
    //Slider control de volumen
    /* Este volumen está mal */
    let inputVolumen = document.getElementById('volume').value / 100;
    volume.addEventListener("change", function(e) {
        source.volume = e.currentTarget.value / 100;
    })
    
    // si estamos empezando y hay dos canciones sonando, 
    // el volumen empieza en cero y va subiendo
    if (source.currentTime < fading && play2) {
      inputVolumen = (source.currentTime / fading) * inputVolumen;
      console.log('Volumen subiendo', inputVolumen);
    } else if (source.currentTime > (source.duration - fading)) {
      // ¿Ha empezado otra canción?
      if (!play2) {
        cargarCancion(aleatorio()); // Si no, carga la siguiente canción
        play2 = true; //ya hay dos!
      }
      // estamos bajando el volumen...
      inputVolumen = ((source.duration - source.currentTime) / fading) * inputVolumen;
      console.log('Volumen bajando', inputVolumen);
    }
    source.volume = inputVolumen;
  });
  //canción terminada, no hay dos canciones a la vez sonando
  source.addEventListener('ended', () => play2=false);
}

function aleatorio(){
    return Math.round(Math.random() * (lista.length - 1));
}

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

// Fin listado

let listado = document.getElementById("listado");
for (let x of lista){
    let item = document.createElement("li");
    item.innerHTML = x[1];
    listado.appendChild(item);
}
<h3>
<div id="titulo"></div>
</h3>
<button id="play" onclick="cargarCancion(aleatorio());">Play</button>
<ul id="listado"></ul>
<div id="time"></div>
<input type="range" id="volume">

PD: No es necesario obtener el valor de volume a través de un getElementById("volume"). Te recuerdo que el DOM genera una variable en el ámbito global y en window con el nombre de cada elemento con una propiedad id definida.

2
  • 1
    Realmente me has enseñado a corregir para aprender donde estaban mis errores, no soy experto en JavaScript pero me has enseñado también, gracias!!! Commented el 19 sept. 2022 a las 17:31
  • Un placer haber sido de ayuda :) realmente tenías el código "casi casi" a punto, te faltaba únicamente el detalle de tener en cuenta el volumen a la hora de calcular la transición ;) Commented el 19 sept. 2022 a las 18:20
2

Aunque ya tienes una respuesta al problema, y tal como digo en mi comentario, es posible hacerlo guardando el estado del volumen. Sin embargo, y si estoy entendiendo bien tu pregunta, tu código tiene algunos detalles de implementación que mejorar.

En primer lugar, y basado en mi experiencia, es mejor usar los eventos del elemento multimedia (audio o video). De esta forma el control que ganamos sobre la aplicación es mayor.

Por otro lado, la forma de calcular el volumen no es correcta. El volumen de cualquier elemento multimedia, es un valor flotante entre 0 y 1 (ambos incluidos). Para calcular este valor, usando una barra tipo slide como la que muestras en tu pregunta, debes convertir el rango de amplitud de la misma en un rango entre 0 y 1.

Por último, y dado que deseas encadenar 2 canciones (audio) con un efecto fade in y fade out, podrías usar una cola de máximo 2 elementos, que permiten reproducir los 2 audios al mismo tiempo. Uno de ellos (el que está finalizando) ejecutará el efecto fade out y el otro hará el efecto fade in.

Los eventos del elemento de audio que usaremos serán:

  • timeupdate con este evento sabremos en qué momento aplicar el efecto de fade-in / fade-out y podremos calcular el tiempo transcurrido para mostrarlo en pantalla.
  • canplaythrough con este evento podemos comenzar la reproducción de un nuevo elemento multimedia creado cuando tenemos la certeza que la misma puede llevarse a cabo de forma contínua (suficientes datos en el buffer).
  • ended con este evento podemos determinar cuando una pista de audio ha terminado su reproducción y procedemos a sacarla de la lista.

Cuando hablo de cola, me refiero a crear una lista de rerpoducción que permita una cantidad de pistas reproduciéndose al mismo tiempo. Como se desea hacer un efecto de entrada y salida entre 2 pistas de audio durante un tiempo determinado, esta será la cantidad máxima de pistas de audio que contendrá nuestra lista durante un tiempo determinado.

Además, le he dado una utilidad un poco más grande al botón de reproducción. No sólo permite reproducir la pista, sino que puedes pausar la reproducción al volver a hacer clic en el mismo.

He tratado de evitar cambios en el aspecto actual en tu pregunta para enfocarme en lo esencial.

Volúmen

Para calcular el volúmen dado el valor actual del slider, utilizo el valor máximo del element slider o 100 si el mismo no está definido en el elemento. Así, si deseo un valor entre 0 y 1 que sea aceptado por el elemento de audio, simplemente debo dividir el valor actual del slider entre el valor máximo del mismo.

Por ejemplo:

const slider11 = document.getElementById('volume11');
const slider = document.getElementById('volume');
const label11 = document.getElementById('label_volume11');
const label = document.getElementById('label_volume');
const audio11 = document.getElementById('audio_volume11');
const audio = document.getElementById('audio_volume');
const maxVolume11 = parseInt(slider11.max) || 100;
const maxVolume = parseInt(slider.max) || 100;
const currentVolume11 = slider11.valueAsNumber;
const currentVolume = slider.valueAsNumber;
label11.innerText = currentVolume11;
label.innerText = currentVolume;
audio11.innerText = currentVolume11 / maxVolume11;
audio.innerText = currentVolume / maxVolume;
function onSlideChange(event) {
  const currVolume = event.currentTarget.valueAsNumber;
  const currMax = event.currentTarget.max || 100;
  const audVolume = currVolume / currMax;
  const id = event.currentTarget.id;
  document.getElementById(`label_${id}`).innerText = currVolume;
  document.getElementById(`audio_${id}`).innerText = audVolume;
};
slider11.addEventListener('change', onSlideChange);
slider.addEventListener('change', onSlideChange);
<label for="volume11">Volume: <span  id="label_volume11"></span>
<input name="volume11" id="volume11" type="range" max ="11">
<div>Audio volume: <span id="audio_volume11"></span></div>
<br>
<br>
<label for="volume">Volume: <span  id="label_volume"></span>
<input name="volume" id="volume" type="range">
<div>Audio volume: <span id="audio_volume"></span></div>

En el código anterior puedo reutilizar la función que captura el cambio en el slider. La idea es mostrar cómo obtener el valor correcto del volumen del audio basados en dos propiedades del slider, que son su valor actual y su valor máximo.

Timeupdate

La parte de lógica que puede llegar a costar trabajo de entender es la que se produce cuando hay un cambio en la propiedad currentTime. Basicamente lo que haremos cuando se dispara este evento es calcular el volumen de forma progresiva tanto para el efecto fade-in como para el efecto fade-out. Este incremento y decremento es practicamente "lineal" (no entraré en detalles sobre los tipos de transformaciones que se pueden aplicar).

Pero para poder aplicar esta transformación "lineal" al efecto, debemos realizar algunos cálculos no tan complicados. En estos cálculos, capturamos el volumen indicado por el slider durante el tiempo que dure el efecto, incrementando su valor desde cero hasta el valor que indica el slider y viceversa en cada pista de audio, según la misma esté entrando o saliendo de la cola.

En cada cambio de currentTime detectado, calcularemos el volumen de la siguiente forma:

// para fade-in:
const volume = (currentTime * currentVolume) / fadingTime;
// para fade-out:
const volume = (remainingTime * currentVolume) / fadingTime;

en ambos casos, currentVolume se refiere al volúmen actual calculado para el audio usando el método visto anteriormente:

const currentVolume = slider.valueAsNumber / maxVolume;

El efecto de fade-in y fade-out se aplicará detectando si estamos en los primeros segundos de reproducción o en los últimos:

if(currentTime < fadingTime) { ... }
if(remainigTime < fadingTime) { ... }

Por último, sólo una vez comprobaremos que el volumen de la pista sea el indicado por el slider, sino debemos ajustarlo, ya que el cáclulo del volumen nunca será exacto tal y como lo estamos realizando aquí.

if(audio.volume !== currentVolume) {
  audio.volume = currentVolume;
}

Con esto claro, cada vez que una pista de audio comience a sonar, su volumen será ajustado desde 0 hasta el volúmen indicado por el slider durante el tiempo que dure el efecto, y cuando la pista esté por terminar, sucederá lo mismo pero de forma inversa.

El código completo puede verse parecido al siguiente:

const trackList = [
  {
    src: 'https://storage.googleapis.com/media-session/sintel/snow-fight.mp3',
    name: 'Track 1'
  },
  {
    src: 'https://storage.googleapis.com/media-session/big-buck-bunny/prelude.mp3',
    name: 'Track 2'
  }
];

const fadingTime = 10;
const fadeIn = true;
const fadeOut = true;
const playButton = document.getElementById('play_pause');
const title = document.getElementById('title');
const volumeDisplay = document.getElementById('volume_display');
const volumeSlider = document.getElementById('volume');
const timeDisplay = document.getElementById('time_display');
const listing = document.getElementById('track_list');
trackList.forEach(track => {
  const item = document.createElement("li");
  item.innerHTML = track.name;
  listing.appendChild(item);
});

const audioObjects = [];
const maxVolume = parseInt(volumeSlider.max) || 100;
let currentAudio;
volumeDisplay.innerText = `${volumeSlider.valueAsNumber} / ${maxVolume}`;
function getRandomTrack() {
  const randomIndex = Math.floor(Math.random() * trackList.length);
  return trackList[randomIndex];
}

function getTimeFormatted(seconds) {
  if(!seconds) {
    return '00:00';
  }
  seconds = Math.round(seconds);
  let minutes = 0;
  if(seconds > 59) {
    minutes = Math.floor(seconds / 60);
    seconds -= minutes * 60;
  }
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}

function getVolume() {
  return volumeSlider.valueAsNumber / maxVolume;
}

function getAudioTrackName(audio) {
  const track = trackList.find(track => track.src === audio.src);
  return track.name;
}

function audioCanPlayThrough(event) {
  const name = getAudioTrackName(event.currentTarget);
  console.log('Ready to play:', name);
  event.currentTarget.play();
}

function audioEnded(event) {
  const name = getAudioTrackName(event.currentTarget);
  console.log('Track ended:', name);
  audioObjects.shift();
}

function audioTimeUpdate(event) {
  const currentTime = event.currentTarget.currentTime;
  const remainingTime = event.currentTarget.duration - currentTime;
  const currentVolume = getVolume();
  if(currentAudio === event.currentTarget ) {
    const currentDisplay = getTimeFormatted(currentTime);
    const durationDisplay = getTimeFormatted(event.currentTarget.duration);
    timeDisplay.innerText = `${currentDisplay} / ${durationDisplay}`;
  }
  if(currentTime <= fadingTime && fadeIn) {
    const volume = (currentTime * currentVolume) / fadingTime;
    event.currentTarget.volume = volume;
  } else {
    if(event.currentTarget.volume !== currentVolume) {
      event.currentTarget.volume = currentVolume;
    }
  }
  if(remainingTime <= fadingTime && fadeOut) {
    if(audioObjects.length < 2) {
      instantiateAudio();
    }
    const volume = (remainingTime * currentVolume) / fadingTime;
    event.currentTarget.volume = volume;
  }
}

function attachListeners(audio) {
  audio.addEventListener('timeupdate', audioTimeUpdate);
  audio.addEventListener('canplaythrough', audioCanPlayThrough);
  audio.addEventListener('ended', audioEnded);
}

function instantiateAudio() {
  const track = getRandomTrack();
  title.innerText = track.name;
  const audio = new Audio(track.src);
  attachListeners(audio);
  audio.volume = getVolume();
  console.log('Loading track:', track.name);
  audio.load();
  audioObjects.push(audio);
  currentAudio = audio;
}

playButton.addEventListener('click', event => {
  if(!audioObjects.length) {
    instantiateAudio();
    event.currentTarget.innerText = 'Pause';
    return;
  }
  if(currentAudio.paused || currentAudio.ended) {
    event.currentTarget.innerText = 'Pause';
    currentAudio.volume = getVolume();
    currentAudio.play();
    return;
  }
  event.currentTarget.innerText = 'Play';
  currentAudio.pause();
});

volumeSlider.addEventListener('change', event => {
  const volume = getVolume();
  audioObjects.forEach(element => {
    element.volume = volume;
  });
  volumeDisplay.innerText = `${parseInt(volume * maxVolume)} / ${maxVolume}`;
});
button {
  width: 4rem;
  margin: 1rem 0;
}
<h3>
<div>Current: <span id="title">Click Play</span></div>
</h3>
<div>Time: <span id="time_display"></span></div>
<button id="play_pause">Play</button>
<ul id="track_list"></ul>
<input type="range" id="volume">
<div>Volume: <span id="volume_display"></span>

Espero que esto te ayude a resolver el problema.

1
  • Gracias! tu ejemplo también me ha servido mucho además para aprender y comprender... Commented el 19 sept. 2022 a las 17:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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