2 Replies Latest reply on Jul 15, 2014 8:04 PM by jbowden

    Delaying a symbol playing until its audio is ready to play

    Lucir

      I'm trying to create an elearning  composition that requires voice over. I created a symbol that has  an audio embedded in its timeline. When the symbol plays the audio also plays.

      Sometimes, however the audio is delayed and falls out of sync with the animation. Is there a way to know when the audio is ready to play like a property of audio 'isPlaying' or the html5 audio event

      'can play' that I can use? I enabled preloading in my audio.

        • 1. Re: Delaying a symbol playing until its audio is ready to play
          Blokeish Level 1

          I think you should start your animation from within the "oncanplay" event of the audio.

           

          myAu=document.getElementById("audio1");

          myAu.oncanplay=function(){ /*start the animation here*/};

          OR

          myAu.addEventListener("canplay", function() {

             /*start the animation here*/

            }

          );


          NB: I have not executed this code so don't be surprised if you might have to tweak it a bit

          ReferenceL http://www.w3schools.com/tags/ref_av_dom.asp


          1 person found this helpful
          • 2. Re: Delaying a symbol playing until its audio is ready to play
            jbowden Adobe Employee

            Hi there,

             

            Blokeish has given you a very good start, but rather than listening for the canplay event, I'd recommend first stopping your symbol timeline right away, and then listening for the audio element's playing event.

             

            For instance, you could add this to your compositionReady even:

             

            // listens for the audio element's playing event, and then plays your symbol

            sym.getSymbol("your_symbol").$("your_audio element")[0].addEventListener("playing",function() {

                    sym.getSymbol("your_symbol").play();

                });

             

            // this now plays your audio element, which triggers your listener, above

            sym.getSymbol("your_symbol").$("your_audio element")[0].play();

             

            And then add a trigger to your symbol timeline at time zero to stop it:

             

            sym.stop();

             

            I'd expect this to delay your symbol playback reliably (especially when audio is preloaded), because your symbol won't play until your audio actually begins playing.

             

            hth,

            Joe

             

            EDIT: Also listening for the canplaythrough event should make this pretty rock-solid, especially if you've got a large audio file and you're worried about re-buffering

            1 person found this helpful