Drag control timeline with volume crossfade

Elements Audio & Video
2

First free tip.

The you are wanting to control a timeline of animation on it. Life is easier if you create a new timeline and work on that. Putting everything on the Main Timeline will constrain your flexibility.
Use the timelines to break things down

Possibly your best bet is to look at WebAudio API

It looks like most people use the gain property to control volume and fade.
I initially looked here

And hacked an example together.

This is not 100% how you should construct it and I suggest you have a proper look through the docs/examples out there ( unlike what I have done )

There are a lot of examples about, like this one. ( found it later on )

In this very rough example, I created the audio tags inside a rect (the Click to start innerHTML Audio Sounds rect ).

Now since you are going to read through all that stuff I suggested I will not get into that to HTML Audi / Web Audio.

But the part that will likely help is how we fade in and out at once via a drag in a single direction at any time.

Lots of problems with that if we go down the wrong path.

The gain property starts at 0 through 1.
0 = 0%, 0.5 = 50% , 1 = 100% volume.

So that is fine if we want to the current time going from left to right, we can math down so we get 0 thru 1 but your drag starts on the right and the timeline starts at 0.

We need the equivalent of two ships passing in the night.

As we drag from right to left we need one sound going down and one sound coming up at the same time and vice versa
0 < 1
0 > 1

So when we drag the timeline we use the timeline duration and current time line to calculate both gain/volume settings going in both directions.

      var cTime = hypeDocument.currentTimeInTimelineNamed('drag')  
	  var  durationTimeSecs =  Math.floor(hypeDocument.durationForTimelineNamed('drag'))
	  
	 
	 var settingOne = Math.floor(durationTimeSecs - cTime) /10
	  var settingTwo =  Math.floor(cTime)/10
	  
	    
	  gainNode.gain.linearRampToValueAtTime(  settingOne, audioCtx.currentTime + 0.3);
	 	gainNode2.gain.linearRampToValueAtTime( settingTwo, audioCtx2.currentTime + 0.3);

Any way here it is… Hope it helps and I am sure others will chip in.

Drag_Volume_Crossfade.hype 2.zip (556.7 KB)

2 Likes