How to add volume bar to player

Question

I am needing to add a volume bar to my javascript player, and I have tried it this way:

//Slider control volume
    let volume = document.getElementById('volume');
    volume.addEventListener("change", function(e) {
        source.volume = e.currentTarget.value / 100;
  })

The problem that appears to me is that once the volume is adjusted, it works correctly, but when the fader is made between songs, the volume is no longer active as it has been adjusted, my question is, how can I make the volume one Once adjusted from the bar, is it constant once the songs change? Is it possible? I leave the code of the player:

let play2 = false;
const fading= 10; // crossfading seconds

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

function cargarCancion(numero) {
    // Load the song dynamically
  var source = new Audio(lista[numero][0]);
  source.load();
  source.play();
  var titulo = document.getElementById("title");
  titulo.innerHTML = lista[numero][1];
  
  //while it's playing...
  
  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 volume
    let volume = document.getElementById('volume');
    volume.addEventListener("change", function(e) {
        source.volume = e.currentTarget.value / 100;
    })
    
    // if we are starting and there are two songs playing, 
    // volume starts at zero and goes up
    if (source.currentTime < fading && play2) {
      volume = source.currentTime / fading;
      console.log('volume going up');
    } else if (source.currentTime > (source.duration - fading)) {
      // Has another song started?
      if (!play2) {
        cargarCancion(aleatorio()); // If not, load the next song
        play2 = true; //there are already two!
      }
      // We're turning down the volume...
      volume = 1 - (source.duration - source.currentTime) / fading;
      console.log('volume down');
    }
    source.volume = volume;
  });
  //finished song, there are not two songs playing at the same time
  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"]];

// End of listing
let listado = document.getElementById("listado");
for (let x of lista){
    let item = document.createElement("li");
    item.innerHTML = x[1];
    listado.appendChild(item);
}

Thank you and I look forward to any help or suggestion.

How to add volume bar to player

0 Answers