Skip to main content
chenjil43641795
chenjil43641795
Brainiac
February 14, 2018
Answered

HTML5 Canvas ，Sound Synchronization，How to Achieve

  • February 14, 2018
  • 2 replies
  • 4104 views

HTML5 Canvas ，Sound

How sound is synchronized like AS3。

Need to add sound，

sound and picture Sync

    This topic has been closed for replies.
    Correct answer Colin Holgate

    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.

    2 replies

    Colin Holgate
    Colin Holgate
    Inspiring
    February 15, 2018

    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
    chenjil43641795Author
    Brainiac
    February 15, 2018

    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
    Colin HolgateCorrect answer
    Inspiring
    February 15, 2018

    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.

    ankushr40215001
    ankushr40215001
    Inspiring
    February 15, 2018

    Hey chenjil,

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

    Hope this helps.

    Regards,

    Ankush

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices