I have this JavaScript audio player that randomly plays one song and mixes it with the next. I have the need to show the seconds of playback and the total time of the song in a div, but I can't think of a way to show it.
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>
Can you give me an idea or help on this topic? Thank you very much in advance.
In the code that you show, the elements that you are requesting appear
So if you put:
Is this what you are looking for?
I've managed to hide the NAM until it loads playtime:
But the playback time shows for example 0:15/5:23 and it would be interesting if it were 00:15/05:23 is it possible to change it in function time_convert(num) ???