Using GSAP to trigger other libraries' methods

[swampthang]

I've seen some other questions regarding syncing GSAP and audio. I need to be able to create a tool that allows you to establish a region of an audio file as an audio loop, repeat that loop a number of times and then fade out the 'playing' loop after a GSAP animation has finished. In order to do that, I needed a waveform creation tool and didn't have time to build that from scratch.

 

I've been experimenting with Wavesurfer and its regions plugin. It doesn't have a fade-out method so had to create one using TimelineMax's callback method, but it has most of the other pieces needed to make this happen.

 

I've got it working but what I'd like to be able to do is combine GSAP's draggable to turn this into a light version of an audio editor where dragging the edges of an audio block would trim the audio from either edge. A right-click context menu could allow for splitting an audio block into 2 separate blocks.

 

Also, would be very cool to have a draggable fade setting for the ends of the blocks.

 

Thought this might be interesting enough to some that might like to fork the codepen and play around with it. I've forked the codepen myself and am working toward that end.

See the Pen RKbKzv by swampthang (@swampthang) on CodePen

[Jonathan]

Thank you for sharing swampthang

[swampthang]

Wonder if some of you math geniuses can help me with something. In my app, I'm using FFMPEG to concatenate and save a temp .wav file instead of calculating a number of loops. Also, instead of trying to add a GSAP Tween for the fade using an ease (see above description), I need to just build that in Wavesurfer because of several options in the app that made trying to keep up with where the fade was supposed to occur. It's a pretty fluid thing - GSAP main timeline is constantly be changed, scaled, etc. by the user. Settings can change too. So, here's how I am handling it and it works fine but I lost my nice TweenMax ease for the fade...

function setFadeListener() {


  // masterTL is the master GSAP timeline that contains the animation


  var bgSettings = {bgVolume: 1, fadeOutTime: 5};


  var maxVol = bgSettings.bgVolume,
      totalX = bgSettings.fadeOutTime,
      vol = maxVol,
      fadeStart = masterTL.totalDuration()-bgSettings.fadeOutTime,
      currX;
  
  wsBG.setVolume(maxVol); // just making sure the volume is set initially
  
  // audioprocess is a loop that runs in wavesurfer any time it's playing
  wsBG.on('audioprocess', function () {


  // audioprocess fires continuously


    if(masterTL.time() >= fadeStart) {


      currX = masterTL.time() - fadeStart;
      vol = maxVol-(currX/totalX);
      wsBG.setVolume(vol);
    } else {
      wsBG.setVolume(maxVol);
    }
});
}

I wondered if there was a way in GSAP I could calculate a volume ease rather than the ugly straight line that results from the above. Something like a Power2.easeOut would be awesome. If not in GSAP I'll need to find a formula that calculates this. My Math is a bit rusty.

[OSUblake]

Every ease has a getRatio method. 

vol = maxVol - (maxVol * Power2.easeOut.getRatio(currX / totalX));

Here's a post where I do that to make sine waves.

https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401

 

If you want to make the fade part of Wavesurfer, you could add getters/setters to make it easier to work with. This will work with most libraries. No guarantees though. It all depends on how the library creates objects. 

https://greensock.com/forums/topic/15361-understanding-autoalpha/?p=66823

 

 

.

[swampthang]

Blake, you are the man! I knew you'd have an answer. Thanks so much.