Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Praney Behl

Play Audio & Video Sequentially with TimelineLite/Max?

Recommended Posts

Just wondering if there is a way to add and play/pause/stop media elements like audio and video to an instance of TimelineLite or TimelineMax and control with the GSAP-JS API?

 

What I was trying to ask was how to sync the media play/pause/reverse with the gsap timeline.  Anyone any clues?

Link to post
Share on other sites

Hi Praney Behl  :)

 

You can do that easily with GSAP eventCallbacks and function calls ( delayedCall , onComplete , onRepeat , onReverse , onStart , onUpdate and ... )

Link to post
Share on other sites

Hi Praney Behl  :)

 

i think you can do that easily with GSAP function calls ( delayCall , onComplete , onRepeat , onReverse , onStart , onUpdate and ... )

Thanks Diaco, 

 

Would it be possible to get an example?

 

Cheers!

Link to post
Share on other sites

You can do that easily with GSAP eventCallbacks and function calls ( delayedCall , onComplete , onRepeat , onReverse , onStart , onUpdate and ... )

very simple demo :)

pls check this out :

 

See the Pen mydPMO by MAW (@MAW) on CodePen

var audioplay = document.createElement('audio');
        audioplay.setAttribute('src', '.../music.wav');

TweenMax.to(".blue",5,{x:200,
    onStart:function(){audioplay.play()},
    onComplete:function(){audioplay.pause()}
})

  • Like 2
Link to post
Share on other sites

Thanks mate, 

 

I think I should have been more clear, what I was trying to ask was how to sync the media play/pause/reverse with the gsap timeline. Just updated my initial post.

Link to post
Share on other sites

Yea I'm not sure if we're just not getting it but it still seems like Diaco's answers do exactly what you are asking for. You could also add callbacks at any time to a timeline with .add() or .call().

  • Like 1
Link to post
Share on other sites
  • 7 months later...

Came across this post wondering the same question. This answers only one aspect of the question. It's a useful but very simple example. The example shows that you can pause, stop, start an audio, but is there a way to tie the audio scrub bar to a TimelineLite/Max scrub.  So if i where to scrub back in TimelineLite/Max it would adjust the positioning of the audio to match? Logically, if you can .call() the audio and pass a time start can.  If I find/discover the answer I'll post here.

Link to post
Share on other sites
  • 5 months later...
  • 2 months later...

Hey everyone, new here.  Only just found this plugin a few days ago.

I thought I'd share the really basic setup that I got up and running last night to see what others think and see if it can be improved.

For me the important thing is that events happen at the right time in the music.  This setup seems to do the job but I'm wondering if there is a better, more efficient solution.
 

<body>
<svg><!--  Copy-pasted svg code --></svg>

<audio id="music" controls="controls">
    <source src="audio.mp3" type="audio/mp3" />
    <source src="audio.ogg" type="audio/ogg" />
</audio>

<script>
// variable to store HTML5 audio element
var music = document.getElementById('music');

// set audio to loop (optional)
music.loop = true;

// references to svg objects
var svgobj1 = document.getElementById("svgobjectID1");
var svgobj2 = document.getElementById("svgobjectID2");

// timeline set up, note that paused is set to true as the playback 
// will be controlled by the audio to keep in sync
var tl1 = new TimelineLite({paused:true});

tl1.to(svgobj1, blah blah..)
   .to(svgobj1, blah blah..)
   .to(svgobj1, blah blah etc.);

var tl2 = new TimelineLite({paused:true});

tl2.to(svgobj2, blah blah)
   .to(svgobj2, blah blah)
   .to(svgobj2, blah blah etc.);


// when the music is played, play the animation
music.onplay = function(){
    tl1.play();
    tl2.play();
};

// when the music is paused, pause the animation
music.onpause = function(){
    tl1.pause();
    tl2.pause();
};

// when the progress bar on the audio element is jumped to a different
// point manually (or automatically), adjust the timeline to match
music.onseeked = function(){
    tl1.time(music.currentTime);
    tl2.time(music.currentTime);
}

// while the audio is being played, make sure the timelines are in sync 
// with the audio (it otherwise appears to go out of sync if, for 
// example, the tab is not in focus)
music.ontimeupdate = function(){
    tl1.time(music.currentTime);
    tl2.time(music.currentTime);
};

</script>
</body>

That's it.  Really basic.  Just matching up audio events with the timelines.

Let me know what you all think. Thanks.

Link to post
Share on other sites
  • 11 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×