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.
