A Tidy way to Tween to audio?

[Luckyde]

Hey guys small question but i couldn't find any docs on it. 
Say you had an audio piece you trigger on play(for iOS reasons) and you wanted to sync an item to the beat is there a cleaner way than what I'm doing in this codepen. (click on the sound icon).
Basically i'm starting the tweenlite timeline after the audio fully loads and it looks really busy atm. 
Is there a way to go e.g.

TweenMax.to(mything, 1,{top:100,delay:Time.InAudio(0.3)});
instead of starting a timeline hoping for the best so that it doesn't go off sync with the audio. 
Currently on the devices apart from desktop that are slower it goes off sync on the first time but then afterwards it works perfectly on repeat.

I was just wondering if there's a cleaner way to do it than what I'm doing which I'm sure there is. Lines 57-132 is the the code for the beat matching.

Thanks!

See the Pen bZrbpp by LuckyDe (@LuckyDe) on CodePen

[Jonathan]

Hello Luckyde

 

Take a look at the <audio> elements currentTime property:

• <audio> currentTime property: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
• <audio> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

You can see something similar in this forum topic that talks about using GSAP to animate the playhead of a video:

 

http://greensock.com/forums/topic/12771-animating-the-playhead-of-video-element-is-it-possible/#entry53567

 

Hope this helps!

 

[OSUblake]

For loading, use canplay or canplaythrough.

See the Pen qNYbwK?editors=0010 by osublake (@osublake) on CodePen

[Jonathan]

Make sure you use multiple audio formats for your <audio> source so you have a fallback. I would also add WebM format as well to help with compatibility.