9 Replies Latest reply on Aug 8, 2014 12:50 PM by Lucir

    Is there a way to detect if audio is playing?

    Lucir Level 1

      Because the browser delays my audio file, I would like to also delay the animation so as to sync both. Is there a way to do that?

        • 1. Re: Is there a way to detect if audio is playing?
          Preran Adobe Employee

          Hi ywx012,

           

          See Audio Sync in  Edge Animate Help | Add audio to animations Unfortunately, I couldn't find a workaround solution for you.

           

          Thanks,

          Preran

          • 2. Re: Is there a way to detect if audio is playing?
            jbowden Adobe Employee

            Hi there,

             

            You could add an event listener to listen for the audio element's play event, and then use the listener function to trigger your timeline to begin playback.

             

            This would work best if the audio element and timeline you want to control were on different timelines, e.g., audio element on the main timeline and a symbol containing the animation you want to synchronize with your audio. Note that even doing something this doesn't necessarily guarantee perfect synchronization, as you're still subject to any latency in the network while downloading audio, or even within the browser itself.

             

            Another strategy to explore is to break a long audio file into multiple smaller audio files that you use to gain better control over where audio starts in the timeline. This probably works best for narration or sound effect-type audio files.

             

            hth,

            Joe

            • 3. Re: Is there a way to detect if audio is playing?
              Lucir Level 1

              I could not find a play event for my audio element, so I changed it into a symbol and from the symbol timeline I created a trigger where  I was able to then create an element(instance) from the other symbol that contains the animation and play the animation. It seems to work. I will be testing it to see if it has limitations. Thank you so very much. I had almost given up my project altogether. So the timeline is the play event? I also had to remove the audio file from the animation timeline after I had used it to properly locate the elements of the animation to correspond to the sound.

              One thing that puzzled me - if I put the trigger on the audios timeline's at 0 nothing happened. I had to move the trigger to a few milliseconds from 0.

              • 4. Re: Is there a way to detect if audio is playing?
                jbowden Adobe Employee

                Hi again,

                 

                Audio (and video) elements in HTML5 have a play event that fires in the browser whenever the element is played. You won't find this in Animate's API, but you can find all the methods, properties, and events for media (video & audio) elements here:

                 

                HTML Audio/Video DOM Reference

                 

                These can all be addressed via Javascript (that's the basis for the audio and video snippets included in the Actions panel). Javascript event listeners can also be added to "listen" for certain media events such as play or ended, and then run code when the particular event is encountered.

                 

                ywx012 wrote:


                One thing that puzzled me - if I put the trigger on the audios timeline's at 0 nothing happened. I had to move the trigger to a few milliseconds from 0.

                 

                Was the audio element in a symbol? What code was in the trigger?

                 

                Thanks,

                Joe

                • 5. Re: Is there a way to detect if audio is playing?
                  Lucir Level 1

                  Hi, Joe,

                  You mean like:

                  myAudio.addEventListener(play, myListener); Then myListener() would have the instructions to play the animation symbol? How would I refer to myAudio - would that be the name I assigned to the audio symbol? I did not put it in the main timeline I made it a symbol and a button in the main timeline creates a child onto the stage. I think I could use a global variable.

                  For your second question:

                  I made the audio into a symbol and I put the following code in the timeline at 4milliseconds

                  topic1Gvar.play();

                  //here topic1Gvar is a global variable that I declared on the Main Stage under compositionReady event. Now the button I mentioned earlier onClick creates a child of the animation symbol  and a child of the Audio symbol assigns the animation symbol to the variable, topic1Gvar, and puts it on the stage but dose not play it.

                  • 6. Re: Is there a way to detect if audio is playing?
                    jbowden Adobe Employee

                    ywx012 wrote:

                     

                    You mean like:

                    myAudio.addEventListener(play, myListener); Then myListener() would have the instructions to play the animation symbol? How would I refer to myAudio - would that be the name I assigned to the audio symbol?

                     

                    That's it, essentially. You'd point directly to the audio element and add the event listener, such as this (mostly pseudo-code):

                     

                    // compositionReady is a good place for this...

                    sym.getSymbol("my_symbol").$("my_audio_element")[0].addEventListener("play", function() {

                         // do your symbol play stuff here

                    });

                     

                    Not sure why your trigger didn't work, but I'd recommend not using global variables unless absolutely necessary. If you do need this kind of access, namespacing the variable is much safer. In fact, you can even use sym to scope it to a symbol timeline, such as sym.my_var = 1

                     

                    hth,

                    Joe

                    • 7. Re: Is there a way to detect if audio is playing?
                      Lucir Level 1

                      Thank you, Joe, It seems to be working with the addEventListener. I agree about the global variables, but I don't now how to do namespacing and I don't know how to sym to scope to timeline. How could I reference an instance of a symbol created by another function

                      • 8. Re: Is there a way to detect if audio is playing?
                        jbowden Adobe Employee

                        Symbol scoping is pretty easy. You can declare a symbol using sym.var_name, and then access it from any element on the same timeline by referencing sym.var_name. If you're accessing it from a different timeline, you can use getSymbol, such as sym.getSymbol("my_symbol").var_name

                        • 9. Re: Is there a way to detect if audio is playing?
                          Lucir Level 1

                          I don't think I can do that because my symbols do not exit until the user clicks a button. They are created at runtime with sym.createChildSymbol() method and I don't have a reference name for them.