Howler.js: Trying to cross-fade audio clips

[mknowlton]

Hi there - I just recently started using howler.js and am really digging it. Great audio framework! I'm trying to work out a nice way to cross fade two different background audio files. So for instance when file1.mp3 is 1 second from being done, I start to play the file2.mp3.

I saw there is a method for getting the position of the audio being played but I can't figure out how to implement something like this. Do you have any advice or examples you would point me towards? Thanks in advance.

[christophemarois]

Hi! You will no choice but to manipulate the volumes of two Howler instances in a recursive function. The use case you described in your issue could be addressed that way:

var crossfadeDuration = 5000,
    volume            = 0.7;

var instance1, instance2, soundDuration;

// Singleton helper to build similar instances
var createHowlerInstance = function (urls, onload) {
  return new Howl({
    urls: urls,
    loop: false,
    volume: 0,
    onload: onload
  });
};

// Create "slave" instance. This instance is meant
// to be played after the first one is done.
instance2 = createHowlerInstance(['file2.mp3']);

// Create "master" instance. The onload function passed to
// the singleton creator will coordinate the crossfaded loop
instance1 = createHowlerInstance(['file1.mp3'], function(){

  // Get the sound duration in ms from the Howler engine
  soundDuration = Math.floor(instance1._duration * 1000);

  (function crossfadedLoop(enteringInstance, leavingInstance){

    // Fade in entering instance
    enteringInstance.pos(0).play().fade(0, volume, crossfadeDuration);

    // Wait for the audio end to fade out entering instance
    // white fading in leaving instance
    setTimeout(function(){

      enteringInstance.fade(volume, 0, crossfadeDuration);
      crossfadedLoop(leavingInstance, enteringInstance);

    }, soundDuration - crossfadeDuration);

  })(instance1, instance2);

});

[mknowlton]

Thanks so much! Appreciate it.