HTML5 Canvas ，Sound Synchronization，How to Achieve

[chenjil43641795]

HTML5 Canvas ，Sound

How sound is synchronized like AS3。

Need to add sound，

sound and picture Sync

[ankushr40215001]

Hey chenjil,

I am sharing a doc and a forum thread below which might help you with the above query.

• Animate CC (HTML5 Canvas) timeline is not syncing with audio
• How to use sound in Adobe Animate CC.​

Hope this helps.

Regards,

Ankush

[Colin Holgate]

In the topic that Ankush linked to, ClayUUID made some good points about dangers in the technique, so read the whole topic to see what answers I gave to those questions too. The "Correct Answer" message is good enough just for an animation, the problems come up when you have timeline code along the way.

[chenjil43641795]

Very good Code。

But，I express my mistakes.

I need 。

Each screen loads a different MP3 time

createjs.Sound.play("au");

Frame 24th，Play MP3 6th seconds

Frame 60th，Play MP3 13th seconds

[Colin Holgate · Accepted solution]

If you're doing the frame skipping code you could get cases where the frame that a sound was started on gets skipped. You can solve that by setting up a timeout at the start of the animation. If in your case you had a 12 frames per second animation, you could have this in the first frame:

createjs.Sound.play("au");

setTimeout(play2,2000);

setTimeout(play3,5000);

function play2(){

  createjs.Sound.play("6th");

}

function play3(){

  createjs.Sound.play("13th");

}

And have no sounds in the timeline. Each sound would be told to play after the right amount of time.

It would be possible to set up a function that takes parameters, and only have one function that actually plays the sound, but it's not worth the effort to do that just to save a few lines of code.

[chenjil43641795]

I see，Thank you。

Dialogue audio in animated cartoon。

HTML5 It is difficult to achieve.

But thank you.

Learn a lot of things。

[Colin Holgate]

I have had to do lip-flap in HTML5 Canvas animations. I wrote an ActionScript 3 FLA that would analyze the sound, and would give me a set of mouth position numbers. Then in the HTML5 playback I would find the mouth number for the current time, from the set of numbers AS3 gave me, to then set the mouth position. It ended up being pretty good.

[chenjil43641795]

I admire you。

It's a pity that I'm a animator。

The sound operation in the animation process is now really headaches.

AS3, sound can be a very easy data stream。Output swf。

OR

animate the output of SWF，SWF Import ae add sound，Output H.264 MP4

but

HTML5 Difficulty in operation，Only painting，