7

Llevo mucho tiempo intentando implementar un crossfading a mi reproductor de audio html5 que aleatoriamente reproduce un playlist. He encontrado esta API Playlist crossfading que al parecer logra realizar perfectamente la mezcla de audio entre los dos temas, solapando los 2 últimos segundos. El codigo es el siguiente:

var CrossfadePlaylistSample = {
  FADE_TIME: 1, // Seconds
  playing: false
};

CrossfadePlaylistSample.play = function() {
  var ctx = this;
  playHelper(BUFFERS.jam, BUFFERS.crowd);

  function createSource(buffer) {
    var source = context.createBufferSource();
    var gainNode = context.createGain ? context.createGain() : context.createGainNode();
    source.buffer = buffer;
    // Connect source to gain.
    source.connect(gainNode);
    // Connect gain to destination.
    gainNode.connect(context.destination);

    return {
      source: source,
      gainNode: gainNode
    };
  }

  function playHelper(bufferNow, bufferLater) {
    var playNow = createSource(bufferNow);
    var source = playNow.source;
    ctx.source = source;
    var gainNode = playNow.gainNode;
    var duration = bufferNow.duration;
    var currTime = context.currentTime;
    // Fade the playNow track in.
    gainNode.gain.linearRampToValueAtTime(0, currTime);
    gainNode.gain.linearRampToValueAtTime(1, currTime + ctx.FADE_TIME);
    // Play the playNow track.
    source.start ? source.start(0) : source.noteOn(0);
    // At the end of the track, fade it out.
    gainNode.gain.linearRampToValueAtTime(1, currTime + duration-ctx.FADE_TIME);
    gainNode.gain.linearRampToValueAtTime(0, currTime + duration);
    // Schedule a recursive track change with the tracks swapped.
    var recurse = arguments.callee;
    ctx.timer = setTimeout(function() {
      recurse(bufferLater, bufferNow);
    }, (duration - ctx.FADE_TIME) * 1000);
  }

};

CrossfadePlaylistSample.stop = function() {
  clearTimeout(this.timer);
  this.source.stop ? this.source.stop(0) : this.source.noteOff(0);
};

CrossfadePlaylistSample.toggle = function() {
  this.playing ? this.stop() : this.play();
  this.playing = !this.playing;
};

Una demo de mi reproductor es este:

var reproductor = document.getElementById("audio");
function cargarCancion(numero){

    // Carga la canción de forma dinámica
    var source = reproductor;
    source.src = lista[numero][0];

    reproductor.load();
    reproductor.play();

    var titulo = document.getElementById("titulo");
    titulo.innerHTML = lista[numero][1];
}

audio.addEventListener('timeupdate', (event) => {
  if (audio.currentTime > (audio.duration - 1)){ // Finaliza el audio 1 seg. antes

	cargarCancion(aleatorio()); // Recarga la lista para seguir reproduciendo
  }
});

function aleatorio(){
    return Math.round(Math.random() * (lista.length - 1));
}
// Inicio listado
			
var lista = [["http://www.sonidosmp3gratis.com/sounds/008576979_prev.mp3", "TEST UNO"],
            ["http://www.sonidosmp3gratis.com/sounds/short-circuit.mp3", "TEST DOS"],
            ["http://www.sonidosmp3gratis.com/sounds/whistle-campana-whatsapp.mp3", "TEST TRES"],
            ["http://www.sonidosmp3gratis.com/sounds/mario-bros%20vida.mp3", "TEST CUATRO"],
            ["http://www.sonidosmp3gratis.com/sounds/messenger-tono-mensaje-.mp3", "TEST CINCO"]];

// Fin listado

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

reproductor.addEventListener("ended", function(){
    cargarCancion(aleatorio());
});
<audio id="audio"></audio>
<h3><div id="titulo"></div></h3>
<button id="play" onclick="cargarCancion(aleatorio());"> Play</button>
<ul id="listado"></ul>

Necesito ayuda para saber si es posible implementarlo en mi reproductor de audio y de qué forma realizarlo. Cualquier ayuda lo agradezco muchísimo de antemano!!!

@Pablo Lozano, en mi ejemplo, inicio el contador de tiempo con la variable var reproductor = document.getElementById("audio"); y este es el código:

audio = document.getElementById('audio');
audio.addEventListener('play', play_evento, false);
audio.addEventListener('timeupdate', actualizar, false);
 
function play(){
    audio.play();
}

function pause(){
    audio.pause();
}

function stop(){
    audio.pause();
    audio.currentTime = 0;
}

function play_evento(){
    document.getElementById('tiempo_actual').innerHTML = secToStr(audio.currentTime);
    document.getElementById('tiempo_total').innerHTML = secToStr(audio.duration);
}

function actualizar(){
    document.getElementById('tiempo_actual').innerHTML = secToStr(audio.currentTime);
    document.getElementById('tiempo_total').innerHTML = secToStr(audio.duration);
}

function secToStr(sec_num){
    sec_num = Math.floor(sec_num);
    var horas   = Math.floor(sec_num / 3600);
    var minutos = Math.floor((sec_num - (horas * 3600)) / 60);
    var segundos = sec_num - (horas * 3600) - (minutos * 60);
         
    if (horas    < 10) horas    = '0'+horas;
    if (minutos  < 10) minutos  = '0'+minutos;
    if (segundos < 10) segundos = '0'+segundos;
         
    var tiempo = minutos+':'+segundos;
    return tiempo;
}

Ahora me surge el problema que no sé como implementarlo a tu código para que me muestre el tiempo transcurrido de reproducción y el total, me puedes dar una idea?. Por cierto, gracias por tu interés.

2
  • 3
    Por lo que estuve leyendo en el link de tu pregunta, y en esta otra de SO (stackoverflow.com/questions/13121250/…), son dos mundos diferentes audio element en el que se basa tu reproductor y el Audio Api que se usa en el cross-fader. Y en algun lado dice que la finalidad del audio elemente es hacer streaming básico y la api es para manejo avanzado. En suma si queres cross-fading tenes que migrar el reproductor a una version que esté hecha con la Audio api y descartar la versión con el audio element.
    – Juan
    Commented el 1 jun. 2019 a las 21:17
  • 1
    Lo acabas de dejar muy claro con la info que acabas de aportar, muchísimas gracias!!!, Tendré que replantearlo. Commented el 1 jun. 2019 a las 21:36

1 respuesta 1

2
+50

Puedes hacer lo siguiente: detectar cuando una canción está terminando e ir bajando el volumen y, al mismo tiempo, empezar la siguiente con otro elemento audio con el volumen a 0 e ir aumentando el volumen mientras dure el tiempo de crossfading:

NOTA: No he encontrado dos audios con un final en los que se note mucho el cambio, pero debería funcionar por lo que se ve en los logs de consola ;)

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>

3
  • Ojo Pablo que acabas de crear una bomba!!! lo he testeado en local y funciona perfecto con temas reales, ahora estoy testeando desde el server y parece que funciona igual de bien!... ahora confirmo... Commented el 6 jun. 2019 a las 15:59
  • 1
    Es mejorable... ya actualizaré en unos días una versión mejorada usando el API WebAudio, como el que has puesto, pero tengo primero que aprender a usarla! :P Commented el 6 jun. 2019 a las 16:09
  • Estoy ajustando el crossfading para que simule al máximo un streaming de radio, la idea es de poder crear un reproductor liviano en html, con tu aportación se ha conseguido mayoritariamente. Commented el 6 jun. 2019 a las 16:17

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.