Syncing Animate Canvas Timeline with External Audio

[image_dr]

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:

• Does the set frame rate impact the timeline export? For instance, right now I am at 24 fps. If I change it to 30 or 60, would that make it export more accurately to the right frames per second?
  • To clarify, I know that increasing the frame rate to 30 or 60 from 24 would mean that it would play faster and that I would need to adjust the length. That's not my question. My file is currently at 5040 frames, which at 24 fps equals 3:30, but it finishes playing in about 2:25 seconds.
• If frame rate doesn't impact it, why does the timeline in Animate output to Canvas inaccurately?
• Is there a better way to manage the audio narration? Triggering events and managing that for play/pause seems overkill, especially since my setup actually works really well. I just see the syncing issue (which I can adjust, but would rather have the timeline shown in Animate be accurate to the output.

Please let me know the reason the timeline in Adobe does not translate 1:1 to the actual playback timeline in Canvas.

[ClayUUID]

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.

[image_dr]

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.

[image_dr]

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.

[ClayUUID · Accepted solution]

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.

[image_dr]

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.

[image_dr]

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.

[eric_c2ti]

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.

[ClayUUID]

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.

[eric_c2ti]

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!  

[carrmx0]

did you ever find that script?