Skip to main content
Recompensa finalizada con 50 de reputación otorgada por Jaime Vinuesa
se añadieron 2764 caracteres en el cuerpo
Origen Enlace
Agustin G.
  • 2.8k
  • 1
  • 17
  • 50

Edit: Lo integro con el codigo y le agrego una funcion para convertir los numeros en un formato de minutos:segundos

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
    // 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>

Edit: Lo integro con el codigo y le agrego una funcion para convertir los numeros en un formato de minutos:segundos

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
    // 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>

Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

En el código que tu muestras aparecen los elementos que estas pidiendo

  • source.currentTime
  • source.duration

Entonces si colocas:

source.addEventListener('timeupdate', (event) => {
 document.getElementById("IdDivDondeMuestroLosSegundos").innerHTML = 
 parseInt(source.currentTime) + "/" + parseInt(source.duration);

 let volume = 1; //max
 //....etc
}

Es esto lo que estas buscando?