Copy link to clipboard
Copied
I am doing a 3:30 second animation that I need to pass in parameters from the URL. To do so, I am using an Animate - HTML5 Canvas file to enable me to have it interactive.
Since you can't stream audio in a Canvas file, I am running my audio as an external <audio> file and controlling it (play/pause/mute) from inside the Canvas.
One thing I have noticed is that the timeline doesn't sync 1:1 with the audio. The longer it runs, the more obvious it is that the Canvas timeline plays faster than the audio file. By the end of my 3:30 animation, the Animate Canvas file is about 3-4 seconds ahead of the audio.
I have timed my audio playback to the original audio file and it is dead on accurate, so it's not playing slowly.
Has anyone else had the same issue? My questions are:
Please let me know the reason the timeline in Adobe does not translate 1:1 to the actual playback timeline in Canvas.
There you go. Trying to keep Animate's timeline in sync with an audio file, especially for multiple minutes, is a fool's game. Different hardware will be able to keep to differing degrees.
There is some code you can stick in an Animate project that will force the timeline to skip ahead to keep up with realtime. Personally I don't recommend it, but this may be one of the rare times it's appropriate.
Copy link to clipboard
Copied
image_dr wrote
...you can't stream audio in a Canvas file...
Please let me know the reason the timeline in Adobe does not translate 1:1 to the actual playback timeline in Canvas.
Answered your own question there. I mean, you do know what stream audio does, right?
Stream Synchronizes the sound for playing on a website. Animate forces animation to keep pace with stream sounds. If Animate can’t draw animation frames quickly enough, it skips frames.
How to use sound in Adobe Animate CC
BTW, no, Animate isn't running faster than it should be. If you synched the audio with your animation in the editor, that was a mistake, because the timeline in the editor almost always runs slower than realtime.
Copy link to clipboard
Copied
Thanks for the reply, Clay.
Yes, I do know what streaming audio means. What I meant was, in Canvas you can't run an audio clip as a "streaming" event so the audio playback is linked to the frame you are on the way you normally can in an Animate AS3 file. You can only introduce sounds as events when that frame is reached. So, there isn't an easy way to manage something like an audio narration the way I would in an AS3 file.
When I am discussing the playback syncing, I am not referring to playback while still in Animate. I understand that "playing" the timeline in Animate is always slower.
I am speaking of syncing my animations to the frame which represents a time when played back in the browser. For instance, if I want an animation to happen at the 3:00 mark, my animation should start on frame 4,320 (3 min = 180 sec @ 24fps = 4320 fames). But when I play my Canvas animation in the browser AFTER publishing, it reaches that animation a few seconds prior to 3:00 while the audio runs at real time.
That is what I mean by syncing the animation and audio. Hopefully that clarifies my question.
Copy link to clipboard
Copied
I actually have it backwards. The Canvas playback is slower than the audio, not faster. At the 3 minute mark, the animation is 2.5 seconds slower than actual time (including the audio). So I have to move my frame events up in the timeline in order to sync with the audio.
Copy link to clipboard
Copied
There you go. Trying to keep Animate's timeline in sync with an audio file, especially for multiple minutes, is a fool's game. Different hardware will be able to keep to differing degrees.
There is some code you can stick in an Animate project that will force the timeline to skip ahead to keep up with realtime. Personally I don't recommend it, but this may be one of the rare times it's appropriate.
Copy link to clipboard
Copied
Thanks, Clay.
Yeah, that was the one option I was considering, bumping the audio to match the animation periodically, but your hesitation on that is my hesitation I'm sure. It's a kludge way to solve it.
Thanks for the feedback.
Copy link to clipboard
Copied
And my initial test were in Chrome, which was playing the Canvas animation slower. Firefox plays it either right on or slightly FASTER, if you can' believe that.
I'm going to have to go another route. Thanks again.
Copy link to clipboard
Copied
So… just to kick a horse that's still twitching here where I work and not completely dead…
How exactly would you go about using listeners to trigger animated events in Flash, since we can't rely on the timeline? Are there any good links to get me up to speed on this? I wouldn't bug you guys, but it took me two days to run across the stupid createjs code that reliably listens for whether or not an iPad or browser is stopping audio autoplay, and I'm hoping to cut that down a little bit this time.
Thanks in advance,
Eric.
Copy link to clipboard
Copied
The general principle is that you set up some code to execute every frame. The code compares the current frame with the current time, and if the timeline is behind where it should be, skips ahead as many frames as necessary. This is only safe when there are no code-driven effects on the timeline, because they could be skipped over.
I've never done this myself, but some posters around here have and should have the code for it available.
Copy link to clipboard
Copied
Thanks for the reply, Clay. I posted and promptly got laid out flat with the flu.
I guess I'll dig around and see what I can locate!
Copy link to clipboard
Copied
did you ever find that script?