Jump to content
Search Community

Play Audio & Video Sequentially with TimelineLite/Max?

Praney Behl test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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 comment
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.
×
×
  • Create New...