Highlighted

Syncing Animate Canvas Timeline with External Audio

Explorer ,
Jan 09, 2019

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:

  • 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.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
Discussions

Views

995

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Syncing Animate Canvas Timeline with External Audio

Explorer ,
Jan 09, 2019

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:

  • 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.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
Discussions

Views

996

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Explorer ,
Jan 09, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Explorer ,
Jan 09, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Explorer ,
Jan 09, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Explorer ,
Jan 09, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2019 0
Community Beginner ,
Apr 03, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
Adobe Community Professional ,
Apr 03, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
Community Beginner ,
Apr 09, 2019

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!  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2019 0
carrmx0 LATEST
New Here ,
Nov 24, 2019

Copy link to clipboard

Copied

did you ever find that script?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2019 0