2

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.

2 respuestas 2

3
+50

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?

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>

1
  • Es correctísimo!!! Gracias por tu ayuda, llevaba horas dando vueltas al tema... Commented el 3 sept. 2022 a las 6:33
0

He logrado ocultar el NAM hasta que carga el tiempo de reproducción:

if(isNaN(hours)){
    return "0:00";
    }else{
    return hours + ":" + minutes;
    }

Pero el tiempo de reproducción lo muestra por ejemplo 0:15/5:23 y sería interesante que fuese 00:15/05:23 es posible cambiarlo en function time_convert(num)???

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.