10 Replies Latest reply on Oct 24, 2013 2:12 PM by ljmats

    add sound with html and activate with click


      Hello all,


      I am trying to find a clear example of how to add an mp3 file which I can activate by clicking on a symbol within my composition.  I am hoping for an example of the code and where to place it for both the audio tag and the play instruction. ( I am new to this so I'm sorry if I am not phrasing the question clearly.)  I do not want to use an external library as I already have the sound files I am trying to use. Can anyone point me in the right direction?

      Any help would be greatly appreciated!

        • 1. Re: add sound with html and activate with click

          Open the HTML file in Dreamweaver and insert this in the body:


          <audio controls ="controls" audio autoplay="autoplay" loop class="edgeLoad-EDGE-[COMPOSITIONCLASS]">

          <source src="LOCATION" type="audio/EXTENTION" />




          For example:


          <audio controls ="controls" audio autoplay="autoplay" loop class="edgeLoad-EDGE-31576846">

          <source src="sound/butterfly.mp3" type="audio/mp3" />


          1 person found this helpful
          • 2. Re: add sound with html and activate with click
            Emmy52 Level 1

            Thank you for the speedy reply! Once I put the above code into Dreamweaver, how do I get it into Edge?  Just copy and paste? Also where in Edge would I put it? 

            • 3. Re: add sound with html and activate with click
              razormaster Level 1

              Wagen you save tour werk in Edge, it generates a .html file. Open that file in DW, paste the code and save. Re-open it in Edge and the sounds are listed in the library

              • 4. Re: add sound with html and activate with click
                waltepa Level 1

                I had sound working in edge using those edge commons codes.  when I opened the html in DW it played beautifully.  But when I went back to the edge file, the sound didn't work.   Ugh!  I am NOT a code person at all, so I'm really getting frustrated.  I'll try this approach again and see what happens.

                • 5. Re: add sound with html and activate with click
                  resdesign Adobe Community Professional & MVP

                  Does it work in any browser or none? ogg files will work in FF and mp3 in others.

                  • 6. Re: add sound with html and activate with click
                    waltepa Level 1

                    i had it working in FF and GC, when I previewed in browser, but when I put the edge file on my page and published it, it did not play the sound.


                    I have both .mp3 and .ogg files of the same sound in the edge commons code.


                    Now the new edge animate version crashes in GC and will only play on FF both without sound.

                    • 7. Re: add sound with html and activate with click
                      waltepa Level 1

                      if I have both an .mp3 and .ogg file for the same sound, how do I insert them both into the code?

                      • 8. Re: add sound with html and activate with click

                        While many people recommend Edge Commons (http://www.edgedocks.com/edgecommons ) I've found that were problems with the sound aspect of it for many devices.


                        Instead, I've been using buzz.js and it works really well on newer versions of iOS and Android (iPad 2-4, Galaxy S2, Nexus 7, iTouch running iOS 6).




                        You'll need to modify your external index.html to include buzz.js before the index_edgePreload.js:


                        For example:


                        <script type="text/javascript" charset="utf-8" src="js/buzz.js"></script>

                        <!--Adobe Edge Runtime-->

                            <script type="text/javascript" charset="utf-8" src="index_edgePreload.js"></script>


                        Assuming the js is in a folder called js relative to your index file.


                        Make sure you've got your ogg and mp3 files in your top level or put this in a media folder.


                        In Animate, put this into your composition ready code:


                        var mediaPath = "media/"; //could be called anything. just make sure it matches with the variable in the sound creation code below. best to put it up as high in the code as possible. Choose Full View for the code and put it right after:


                        //Edge symbol: 'stage'


                        var mediaPath = "media/"; // stick it here


                        get the clicker going:


                        Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym,e){

                             sym.audio01 = new buzz.sound( mediaPath + "yourSoundNameGoesHere", {formats: ["ogg","mp3"]});




                        you can "stack"/load more audio elements in the above code.


                        Link to the elements action:


                        Symbol.bindElementAction(compId, symbolName, "${_your_click_symbol_name}", "click", function(sym,e){


                        //e.preventDefault(); used when combined touchstart and mousedown - though a problem that hinders scrolling






                        As a side note for those who are working with sounds that aren't triggered via a user action, iOS does not autoplay sounds.

                        1 person found this helpful
                        • 9. Re: add sound with html and activate with click
                          aa_lique Level 1


                          Thanks for yr post. I am using buzz.js.

                          However, i am alittle confused about how to actually implement the code. Patience pls, i am an artist w/a little understanding of scripting in C, javascript, actionscript, etc. But desperately trying to accomplish a goal here of creating a simple animation with interactivity using soundfx on mouseovers.


                          Do I add all of the code into the compositionReady code for Stage?



                          // insert code to be run when the composition is fully loaded here


                          var mediaPath = "media/";


                          Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym,e)


                                 sym.audio01 = new buzz.sound( mediaPath + "media/chimes", {formats: ["ogg","mp3"]});


                          Symbol.bindElementAction(compId, symbolName, "${mySymbol_name}", "click", function(sym,e)






                          • 10. Re: add sound with html and activate with click

                            Hi aa_lique,


                            I bet you've long since figured this out, but for anyone else with the same question, yes, you can put all the code you cited in compositionReady. However, you don't have to manually put the element click action in compositionReady. I'll show you that and clarify where you should put everything mrnoble mentions, in case you're new to implementing sound in Edge like I am. Thanks to mrnoble for posting the original explanation.


                            You should add this code just above <!--Adobe Edge Runtime-->  in the HTML file Edge Animate produces:


                                                <script type="text/javascript" charset="utf-8" src="buzz.js"></script>


                            I set my source (src="buzz.js") as just "buzz.js" because my buzz.js file is at the same folder level as the html file.


                            If you put the buzz.js file in a folder called GreenEggs, it would look like this:


                                                <script type="text/javascript" charset="utf-8" src="GreenEggs/buzz.js"></script>


                            Next, you'll add code in the Code window, Full Code view, in Edge Animate. aa_lique, I'm only going to add some of the code mrnoble mentions to compositionReady because there's a simpler way to do it (if you're not so hot at coding). Add this under   (function(symbolName) {       :


                                                  var mediaPath = "myAudioFolder/";


                            myAudioFolder is the folder in which you've stored your audio files. Now you can use the variable mediaPath to refer to the folder or file path without typing it out each time. My audio folder is called "audio", so here's what my code looks like:


                                                (function(symbolName) {


                                                   var mediaPath ="audio/";


                            Next, you want to preload your sounds. This is done just below     var mediaPath = "myAudioFolder/";     


                                                Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym,e)


                                                      sym.AudioName = new buzz.sound(mediaPath + "myAudioFileName", {formats: ["mp3", "ogg"]});



                            AudioName is what you want to call your audio clip when you're working with it in Edge. myAudioFileName is the name of the audio file inside the folder specified by mediaPath.

                            Here's mine - I use "Clip5" to refer to the audio clip inside Edge, and the actual file name is SoundClip5.mp3. 


                                                Symbol.bindElementAction(compId, symbolName, "document", compositionReady". function(sym,e)


                                                     sym.Clip5 = new buzz.sound (mediaPath + "SoundClip5", {formats:["mp3"]});



                            You mentioned that you wanted to play the sound when the user hovered over an element in Edge. Here's where my explanation differs from mrnoble's. I prefer to let the Edge interface do the work for me!


                            Suppose you have a rectangle on the stage called ShockBox. When the user hovers their mouse over it, you want to play a "BZZZT!" noise, called ShockSound in Edge (assume you've already preloaded it appropriately).


                            Select the Actions icon for the ShockBox element. Select the mouseover trigger. In the code window, enter the following:




                            Entering this code in Actions>mouseover for ShockBox will get the same result as the following, placed in the compositionReady part of the full code:


                                                Symbol.bindElementAction(compId, symbolName,"${_ShockBox}", "mouseover", function(sym, e){




                            I hope this clarifies/simplifies things a bit.



                            1 person found this helpful