37 Replies Latest reply on Nov 11, 2013 11:40 AM by ASGEIRRDSIGN

    playing audio via Buzz javascript

    terryjh Level 1

      I know this involves a 3rd party piece of software but I believe the error, solution lies within Edge and not the Javascript

       

      I am using the tutorial (http://outof.me/edge-animate-adding-sound-effects/) for integrating sound into my Edge Animate project.


      As far as I can tell I have followed the instructions to the letter. The Javascript used is from this website: http://buzz.jaysalvat.com/


      When I try to preview the animation in my browser, the animation plays but the sound doesnt. Animate shows the following error:


      unsupported path(s): /sounds/voice.ogg, voice.mp3, voice.wav


      Voice is the file name and below is the Javascript code I have been using in the action button:


      var voice = new buzz.sound( "/sounds/voice.ogg", {

      formats: [ "ogg", "mp3", "acc", "wav"]});


      voice.bind('loadeddata', function(e) {

      // Playing the stage

      var stage = Edge.getcompsition(compId).getStage();

      stage.play();


      // Playing the sound

      voice.play();


      });


      });

      //Edge binding end



      The audio file is in both mp3 and ogg format which are both supported by Chrome.

      It is a transcript of speech lasting approximately 1 minute and is 700kb in size.


      I have not found the cause of the error (hence this question) and would appreciate any help.

        • 1. Re: playing audio via Buzz javascript
          resdesign Adobe Community Professional & MVP

          I am not sure it is the reason but you have a typo in your code.

          // playing stage

          var stage = Edge.getComposition(compId).getStage();

          • 2. Re: playing audio via Buzz javascript
            RyanHEvans77 Level 1

            I am actually have the exact same problem. I have looked over the code several times and made sure that there are no typos and that hasnt made a change. I hope someone can figure it out.

            • 3. Re: playing audio via Buzz javascript
              nshebroe Level 1

              You do not need to type the extension in the file path. It is done for you by the following line. So, assuming you have a folder called "sounds" in the same directory as your animation... ("/sounds/voice.ogg",     should be: ("sounds/voice",

              • 4. Re: playing audio via Buzz javascript
                RyanHEvans77 Level 1

                This does not help either. I do not have the extension at the end of the file name, instead it is where you say, but it still give the error. Thanks for your input, though.

                • 5. Re: playing audio via Buzz javascript
                  terryjh Level 1

                  Hi

                   

                  Not sure about the typo as its a direct copy from the video tutorial and it seemed to work for him. Either way, Im still getting the same error after trying a new project with just  a 3 second mp3 'ding'.

                   

                  As Ryan said, Ive not put the file extension there either so have no idea whats going on. Ive also tried specifing the file path, i.e. adding the project folder but to no avail

                  • 6. Re: playing audio via Buzz javascript
                    heathrowe Most Valuable Participant

                    Terry how did you implement the buzz.js script?

                     

                    After watching the video tutorial I suspect it may be a small workflow issue. The author of the video adds the script reference directly to the html source file, THEN edits the Edge project. I believe (anyone correct me if I'm off here) what happens in this workflow is when you then edit the Edge project file, it overwrites the changes that were added manually.

                     

                    On that note if you add the script reference dynamically using getscript(), append() or yepnope() (or other availalable methods), I used append(). The stage level script script should now look like this. The difference is the added item in bold below. This way you don't have to manually edit the html file.

                     

                    $('head').append("<script type='text/javascript' src='buzz.js'></script>");

                     

                    var bounceSound = new buzz.sound("audio/bounce", {formats: ["mp3"]});
                        bounceSound.bind('loadeddata', function(e) {

                        var stage = Edge.getComposition(compId).getStage();
                        stage.play();

                        bounceSound.play();
                        });

                     

                     

                    Sample file: http://www.heathrowe.com/edge/buzzaudio/

                    Download:  http://www.heathrowe.com/edge/buzzaudio/buzzaudio.zip

                     

                    Note above sample uses just a single sound file version, and does not include the bounce animation. Also its the first time I have seen the code injection 'directly' onto the Stage. I usually plac them at the compositionReady event handler. Nonetheless, it works.

                     

                    hth

                    Darrell

                    1 person found this helpful
                    • 7. Re: playing audio via Buzz javascript
                      resdesign Adobe Community Professional & MVP

                      Hey darrell,

                      You zip link is wrong (same as the link above)! Would love to see your implementation.

                      • 8. Re: playing audio via Buzz javascript
                        terryjh Level 1

                        Hi Darrell

                         

                        Thanks for replying. I did add the script reference in the same method as the author prior to working on the project. Have just tested what you posted and low and behold the animation plays with sound. Awesome, cant thank you enough!!!

                         

                        Terry

                        • 9. Re: playing audio via Buzz javascript
                          heathrowe Most Valuable Participant

                          Thanks Marie for pointing it out (unfortunately can't edit the above thread, so it's reposted below)

                           

                          correct download is http://www.heathrowe.com/edge/buzzaudio/buzzaudio.zip

                           

                          Super - glad it was sorted Terry.

                           

                          Darrell

                          • 10. Re: playing audio via Buzz javascript
                            resdesign Adobe Community Professional & MVP

                            Thank Darrell,

                            I have been using edge commons for sound but this might be a great alternative!

                            • 11. Re: playing audio via Buzz javascript
                              terryjh Level 1

                              On the offchance that you know...

                               

                              Will this method of exporting sound work with publishing the animation as an oam file which I can the upload into wordpress or would I have to expand my limited knowledge of web development beyond simple wordpress plugins?

                               

                              Thanks

                               

                              Terry

                              • 12. Re: playing audio via Buzz javascript
                                terryjh Level 1

                                Sorry, didnt realise that I could only click Correct once, but yours was

                                • 13. Re: playing audio via Buzz javascript
                                  heathrowe Most Valuable Participant

                                  I aactually tried a few things but to no avail, unfortunately.

                                   

                                  Even in the original authored video, the author mentions that when you publish, make sure to copy the appropriate audio folder and .js script file to the published version.

                                   

                                  As for .oam, its simply a compressed format like .zip, just renamed differently (.oam), with additional .xml configuration files.
                                  - So I tried renaming the .oam to .zip. Success.
                                  - Unzipped the .zip file, Success.
                                  - In the newly unzipped folder structure navigate inside the Assets folder and copy the previous /audio folder + buzz.js there. Success.

                                  - Re-zip the entire contents. Success.

                                  - Rename the zip file back to oam. Success.

                                   

                                  As a test to see if all the contents works I hopped over to Dw CC, created a new file and resorted to the Insert > Media > Edge Animation menu command. Failed.

                                  An error about incorrect bytes and it would not let me proceed. I am not sure how you are adding it to Worpress, Seeing you ention in another thread you are using a plugin, even though my Dw test failed, you still try the above routine to see if the Wordpress plugin accepts it.

                                   

                                  I tried

                                   

                                  Darrell

                                  • 14. Re: playing audio via Buzz javascript
                                    heathrowe Most Valuable Participant

                                    Got it figured out, at least from Dw perscpective, hopefully, it will work well for the WP plugin as well - no errors.

                                     

                                    I'll repost direction to your other thread before the night is over.

                                     

                                    Darrell

                                    • 15. Re: playing audio via Buzz javascript
                                      resdesign Adobe Community Professional & MVP

                                      For your info, I loaded buzz with yepnope in composition ready. Making sure that it works in all browzer, I added the other formats.

                                       

                                      yepnope(

                                      {

                                          nope:[

                                              'js/buzz.js',

                                           ],

                                          complete: init

                                      }

                                      );

                                       

                                      function init() {

                                                          var tarzan = new buzz.sound("media/Tarzan", {formats: ["mp3", "ogg", "wav"]});

                                                          tarzan.play();

                                      }

                                       

                                        tarzan.load();

                                      • 16. Re: playing audio via Buzz javascript
                                        terryjh Level 1

                                        Hi Darrel

                                         

                                        Thanks for your reply, sorry for the lateness of mind. Ive tried what you said with regards to repackaging the .oam file to a zip file and back again after making the changes but to no avail. i.e. the animation still plays, but there is no sound. In terms of the wordpress plugin, im using EDGE suite.

                                         

                                        Not sure if its anything to do with the $('head').append("<script type='text/javascript' src='buzz.js'></script>"); that solved the initial sound issue I was having within EDGE.

                                         

                                        Have you been able to upload to wordpress or alternatively come across another plugin that does work using the method outlined above?

                                         

                                        Thanks

                                         

                                        Terry

                                        • 17. Re: playing audio via Buzz javascript
                                          terryjh Level 1

                                          Hi, where and which parts of the yepnope folder do I place in my Animate project folder?

                                           

                                          Thanks

                                           

                                          Terry

                                          • 18. Re: playing audio via Buzz javascript
                                            resdesign Adobe Community Professional & MVP

                                            Put it in stage composition ready.

                                            • 19. Re: playing audio via Buzz javascript
                                              resdesign Adobe Community Professional & MVP

                                              You do not need to put anything in a folder except the buzz.js file. I use a folder called js. The code itself goes in stage/composition ready.

                                              • 20. Re: playing audio via Buzz javascript
                                                resdesign Adobe Community Professional & MVP

                                                Yepnope is integrated in edge animate.

                                                • 21. Re: playing audio via Buzz javascript
                                                  terryjh Level 1

                                                  Ok cool, have implemented the code that you posted and then placed the trigger at the point I wanted the sound to play, i.e the same point I got it working with the code suggested by Darrel. The sound does play in the preview in browser, but starts 4 seconds in, instead of 11 seconds in. Now stuck again

                                                   

                                                  To get any sound to play I also had to add this code into the composition ready: $('head').append("<script type='text/javascript' src='buzz.js'></script>");

                                                   

                                                  Thanks for your continued support. Its people like you who give people like me hope!

                                                  • 22. Re: playing audio via Buzz javascript
                                                    heathrowe Most Valuable Participant

                                                    Sorry for the delay, Terry.

                                                     

                                                    Unfortunately I have not tried it with the WP plugin. I just did simple .oam test through DW and it worked fine, carrying over the appropriate external files.

                                                     

                                                    Marie, does the yepnope routine, package external file references once a user resorts to Package to .oam? I never used the yepnope before.

                                                     

                                                    Darrell

                                                    • 23. Re: playing audio via Buzz javascript
                                                      resdesign Adobe Community Professional & MVP

                                                      Terri,

                                                       

                                                      Here is what i have in a project:

                                                      composition ready:

                                                       

                                                      yepnope(

                                                      {

                                                          nope:[

                                                              'js/buzz.js',

                                                           ],

                                                          complete: init

                                                      }

                                                      );

                                                       

                                                          

                                                      function init() { 

                                                                          rain = new buzz.sound("media/rain", {formats: ["mp3", "ogg", "wav"],

                                                                          loop: 'true'});   

                                                      }

                                                       

                                                      I used a toggle button for the rain but you can use play() wherever you want.

                                                       

                                                      // toggle rain

                                                      var toggle = true;

                                                      function btnOnOff(){

                                                                if (toggle){

                                                                          rain.play();

                                                                          toggle=false;

                                                                }

                                                                else{

                                                       

                                                                          toggle=true;

                                                                          rain.stop();

                                                                }

                                                      }

                                                       

                                                       

                                                      sym.$('cloudAni2').click(function(){

                                                                btnOnOff();

                                                      });

                                                       

                                                       

                                                      I can post a sample if you want.

                                                      • 24. Re: playing audio via Buzz javascript
                                                        resdesign Adobe Community Professional & MVP

                                                        Darrell, I am not sure about yepnope in that case but it seems that it should work. I am going to do some more research on that as well as the mechanics of buss.js in Edge.

                                                        • 25. Re: playing audio via Buzz javascript
                                                          dharmes Level 1

                                                          Where do i put these codes

                                                           

                                                          1. $('head').append("<script type='text/javascript' src='buzz.js'></script>");

                                                           

                                                          2. 

                                                          var bounceSound = new buzz.sound("audio/bounce", {formats: ["mp3"]});
                                                              bounceSound.bind('loadeddata', function(e) {

                                                              var stage = Edge.getComposition(compId).getStage();
                                                              stage.play();

                                                              bounceSound.play();
                                                              });


                                                          • 26. Re: playing audio via Buzz javascript
                                                            resdesign Adobe Community Professional & MVP

                                                            Put it in stage/ composition ready.

                                                            • 27. Re: playing audio via Buzz javascript
                                                              dharmes Level 1

                                                              that did not work for me

                                                               

                                                              This is the file i am working. Can you kindly check where i am going wrong?

                                                               

                                                              http://we.tl/yGwsaIeekf

                                                              • 28. Re: playing audio via Buzz javascript
                                                                resdesign Adobe Community Professional & MVP

                                                                Put this in composition ready:

                                                                 

                                                                $('head').append("<script type='text/javascript' src='buzz.js'></script>");

                                                                 

                                                                 

                                                                var bounceSound = new buzz.sound("sounds/01_Gayatri Mantra", {formats: ["mp3"]});

                                                                    bounceSound.bind('loadeddata', function(e) {

                                                                    var stage = Edge.getComposition(compId).getStage();

                                                                    stage.play();

                                                                 

                                                                 

                                                                    });

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

                                                                bounceSound.load();

                                                                 

                                                                and this in first frame of timeline:

                                                                bounceSound.play();

                                                                • 30. Re: playing audio via Buzz javascript
                                                                  dharmes Level 1

                                                                  https://app.box.com/s/fb4rtb4tles5women2sl

                                                                   

                                                                  Hi there i am trying to reuse the coding to make sound work on adobe edge but some reason the sound does not work. Can someone check where I am going wrong?

                                                                  • 31. Re: playing audio via Buzz javascript
                                                                    resdesign Adobe Community Professional & MVP

                                                                    Post your files or PM them to me.

                                                                    Something to remember, you have to have a trigger for mobile devices especially Apple mobile device since you cannot use autoplay on them.

                                                                    • 33. Re: playing audio via Buzz javascript
                                                                      resdesign Adobe Community Professional & MVP

                                                                      Could you please zip all your edge project? just the an file is not enough.

                                                                      • 34. Re: playing audio via Buzz javascript
                                                                        dharmes Level 1

                                                                        http://we.tl/ekQX4RW91n

                                                                         

                                                                        Please see full zip file of my edge project. select home

                                                                        • 35. Re: playing audio via Buzz javascript
                                                                          ASGEIRRDSIGN Level 1

                                                                          Hi, im having the same problem. i fixed the sintax error and i put in this code:

                                                                           

                                                                          the name of my soundfile is motorcycle... the animation works, but no sound. What am i doing wrong?

                                                                           

                                                                          i also tried the exact copy of the buzz code, then it just came unsupported path as well.

                                                                           

                                                                          var motorcycle = new buzz.sound( "/audio/motorcycle.ogg", {

                                                                          formats: [ "ogg", "mp3", "acc"]});

                                                                           

                                                                           

                                                                          motorcycle.bind('loadeddata', function(e) {

                                                                          // Playing the stage

                                                                          var stage = Edge.getcomposition(compId).getStage();

                                                                          stage.play();

                                                                           

                                                                           

                                                                          // Playing the sound

                                                                          voice.play();

                                                                           

                                                                           

                                                                          });

                                                                           

                                                                           

                                                                          PS: Isnt there any way of adding sound without coding?

                                                                           

                                                                          -ASGEIRR-

                                                                          • 36. Re: playing audio via Buzz javascript
                                                                            resdesign Adobe Community Professional & MVP

                                                                            ASGEIRR

                                                                            Did you try to use this on your timeline?


                                                                             

                                                                            motorcycle.play();

                                                                             


                                                                            Here is what you have to be careful of: if you use var you need to load on the same timeline - example:

                                                                            Put this on the timeline

                                                                             



                                                                            var thunder = new buzz.sound("media/thunder", {formats: ["mp3", "ogg"]});

                                                                            then

                                                                             

                                                                            thunder.play();

                                                                             

                                                                             

                                                                            or this in compositionReady - no var - then it is global and plays from anywhere.

                                                                             



                                                                            thunder = new buzz.sound("media/thunder", {formats: ["mp3", "ogg"]});



                                                                            • 37. Re: playing audio via Buzz javascript
                                                                              ASGEIRRDSIGN Level 1

                                                                              Hey, i finally made it work, but i did it just by editing directly in the html using edge code without the buzz file. So the sound is working well from live preview in edge code, it works in all the browsers.

                                                                              But when i try to preview it directly from edge or publish the files. the sound disappears from the edge code and the publish file. So when i my edge.oam file is without sound when i import it to muse. The code seems right, so kinda unsure what to do from here.

                                                                               

                                                                              heres my doc:

                                                                               

                                                                              <!DOCTYPE html>

                                                                              <html>

                                                                              <head>

                                                                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                                                                                        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                                                                                        <title>Untitled</title>

                                                                               

                                                                                        <!--Adobe Edge Runtime-->

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

                                                                                  <style>

                                                                                      .edgeLoad-EDGE-13127509 { visibility:hidden; }

                                                                                  </style>

                                                                              <!--Adobe Edge Runtime End-->

                                                                               

                                                                               

                                                                              </head>

                                                                              <body style="margin:0;padding:0;">

                                                                                        <div id="Stage" class="EDGE-13127509">

                                                                                        </div>

                                                                                  <audio autoplay>

                                                                                  <source src="audio/racing2.mp3" type ="audio/mpeg">

                                                                                      <source src="audio/racing2.ogg" type = "audio/ogg">

                                                                                  </audio>

                                                                              </body>

                                                                              </html>

                                                                               

                                                                              Unsure what to do from here.

                                                                               

                                                                              hoping for a quick reply, thanks in advance.

                                                                               

                                                                              -ASGEIRR-