Tengo este reproductor de audio en JavaScript que reproduce aleatoriamente una canción y la mezcla con la siguiente. Me surge la necesidad de mostrar en un div los segundos de reproducción y el tiempo total de la canción, pero no se me ocurre la forma de poder mostrarlo.
let play2 = false;
const fading= 10; // segundos de crossfading
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 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>
¿Podeis darme una idea ó ayuda sobre este tema? Muchas gracias de antemano.