Edge Animate – Adding Sound Effects

In this new episode of the Piotr On The Edge video series I cover how you can add sound effects to your Edge Animate animations. In order to do that, I use Buzz which is a simple but powerful JavaScript Audio library.



  • Facebook
  • Twitter
  • DZone
  • LinkedIn
  • Email

29 comments

  1. M

    Thank you for the tutorial. This is very helpful and I know adding sound is a very hot topic with EA. Let’s say I want to have a sound play on mouseover and stop playing on mouseout, like on a button. Can you give an example of the code to use for that? Thanks :)

    • Piotr

      You can do it by adding mouseover event to your element on Stage, this can be done from a list of the elements on timeline. On the left hand side there you have {} button when click it will ask you to define an event you want to handle. In this case you may want to use mouseover and there you should call buzzSound.play(); function on your sound object. Sound object you can load as I did in the video at the beginning when your animation is loading.

  2. Ricardo

    Thaks a lot its wonderful your tutorial!!! i hope continue make tutorials, i need to interact with multipple composition on the same page hide, show, play, play reverse; i study de API but dont have the best result please if you have any idea please shared it! Regards!! excelent work!!!

  3. Pepperface

    Great tute! Huge thanks!!!

    Do you (or does anyone else out there) know how to play the sounds via a button in a symbol? At the moment I can only seem to make it all happen by having the ‘myAudio.play();’ code on buttons which reside on the main stage.

    Cheers in advance for any help or advice :)

    • Emily

      You may have already figured this out, but I was having the same issue and finally figured out how to do it.

      When you’re in the code window, you’ll need to add var mySound = new buzz.sound("youraudiofile.mp3"); with the symbol selected on the right hand side as opposed to the stage.

  4. kamal

    Hi Piotr,
    I’m some issues to publish widget (with sound) for iBooksAuthor. When I try my html everything is ok. But… after publishing the widget I have to open it and add sounds but… just importing it into IBA the animation runs but not the sounds… Any suggestion? Thank a lot. K.

    • Piotr

      @kamal If you are using buzz.js make sure it get’s included in your widget. Also you may want to check if the path to buzz.js is correct. If that doesn’t work you may want to try without buzz and use directly js Audio API.

      • kamal

        Yes the path is correct. Exporting from Edge means that you loose the sounds folder. So you have to open the .wdgt insert the folder and it should be ok… But when importing the widget in IBA the animation runs and the sound does not… Try it yourself. If you want I can send you my test file. Thanks again.

  5. Dinant

    Nice tutorial. It works on every browser and android mobile but not on an iPad. Any idea how to get it to work? Is this a common problem?

    Thanks for answering.

    Dinant

    • Pepperface

      Dinant, it’s because ‘autoplay’ is disabled in iOS. For reasons to tiresome to detail here without me getting angry about it all (again), Apple insist that all playback of audio has to be initiated by a ‘user push’. i.e. no sound will play via a timeline trigger. Instead, all sounds need to be called via users clicking on (or mousing over) a button. This is a real pain if you’re creating animated content as hardly makes for a smooth user experience – but there are still some ways you can make it things work reasonably well by triggering sound playback by placing invisible buttons on stage with an on mousemove attached to them, or by coming up with inventive reasons why users would need to click on something. Sorry it’s not better news, and sorry for the delay in replying but I’ve only just this minute received notification of your posted comment!

      • Dinant

        Thanks for answering. Actually, I have buttons that you have to click before the sound is played. But what would the code look like then? And where do I place this code? In the ‘actionpanel?

        Thanks for answering and don’t worry about the delay, I am not that fast myself ;)

        Dinant

  6. Evelien

    Love this tutorial, it realy works great and I also managed to trigger sounds with actions in Symbols :)

  7. Scott Agnew

    This helps immensely; did I miss something or do you have the code downloadable here somewhere? I did not see it… thanks again, Piotr. Great stuff.

  8. Scott Agnew

    So far I have not gotten this to work but I’m a Java Script newbie (close to illiterate) and have most likely just entered something incorrectly while typing code in by hand. ? Would you pleaseconsider posting a sample edge file that people can download? for people who are at my level of ineptitude, it might help a lot. (when I went to put the code in “Stage”, for example, Edge had already put a lot of code in there… I put yours at the top, but even that may be incorrect… T H A N K Y O U!!

  9. Christina

    Hi Piotr!

    This is exactly what I have been looking for to use within INDD for DPS. Like Scott, I am also JS illiterate. If you could post code so we can use as a guide that would be greatly appreciated!

    Christina

  10. Scott Agnew

    T H AN K Y O U ! ! ,
    Piotr. I am trying to learn JS but in the meantime… it helps a lot to have something one is trying to do and an example of it done correctly. Christina, if you are interested, “Javascript & JQuery / The Missing Manual” by David Sawyer McFarland is pretty good; the author gives you (downloadable) exercises to work through and includes a finished example of each, so if you can’t figure out why yours is not working, you can compare it to code that does. It’s not a “perfect” book but it’s civilized at least. Like Piotr.

  11. Scott Agnew

    T H AN K Y O U P I O T R ! !
    I am trying to learn JS but in the meantime… it helps a LOT to have something one is trying to do, and an example of it done correctly. Christina, if you are interested, “Javascript & JQuery / The Missing Manual” by David Sawyer McFarland is pretty good; the author gives you (downloadable) exercises to work through and includes a finished example of each, so if you can’t figure out why yours is not working, you can compare it to code that does. It’s not a “perfect” book but it’s civilized at least. As is Piotr, obviously

  12. Scott Agnew

    one question- Piotr, the file you provided seems to work fine as as far as getting the sound to play- but when I modify the HTML (pasting in your code from “CurvedPathWithSound.html”) it both greatly increases the size of, and locks, the Stage ( so that I can’t edit the size).. The only line of code that seems to refer to the stage is this one:

    I assume that class is in the ? .js files somewhere, because there is no .css … obviously I have not yet opened the .js files an tried searching for this class, but just thought I’d ask in the meantime… the Stage of “CurvedPathWithSound.html does not look huge to me, so I’m thinking that, even with code to paste, I have somehow messed this up. Thanks again for the files though- really great.

  13. Juanjo

    Dear friends, sorry but we have to insist, trying to clarify one BIG question we have :-)
    Ok, we did the things you said with Animate, but (…now we have the problem) is it possible to export it like .oam including the sounds files?, we tryed but… it doesn´t work
    If you can say something, we will be Veeery happy because we are stopped with this…

  14. Daryl

    I have made this very short animation using edge animate, but i have an issue when it comes to trying to stop the phone sound ringing. I have tried putting the sound within a symbol and stopping that symbol but that didnt work I have tried stopping the sound on my main timeline using ring.stop(); but that didnt work. If you have any suggestions that would be great.

  15. Terry Houlding

    Hi, this looks to be a great tutorial. There is a similar one elsewhere which I have also tried but I am still presented with the same problem. When I try to preview in my Chrome browser, an animation which includes sound added in the method of the tutorial, Im always presented with the error: unsupported path(s): /sounds/voice.ogg (and the same in the other audio formats.

    Im completely flummoxed, anyone any ideas?

    Thanks

    Terry

  16. Terry Houlding

    Hi

    I got as far as getting the sound to work in my browser (preview in browser following this discussion thread: http://forums.adobe.com/message/5506965#5506965

    But still struggle to implement this outside of Animate, i.e. to my wordpress site using Edge Suite despite following this discussion thread: http://forums.adobe.com/message/5503359#5503359
    Basically the animation still plays but still no sound. Ive also posed the issue of the latter problem to the Edge Suite support page, but would appreciate any help on this issue (please in laymans terms).

    Terry

  17. Markjspivey

    I’ve tried using buzz.js as well… But something weird keeps happening for me only on iPad, but not html5 on desktop.

    I’m playing 1-2 minute audio clips, and playing the audio when a button is hit.

    Bt what happens is when I first load the page, I hit the button and then it doesn’t play immediately, then starts playing about 1-2 seconds in to the audio clip, so it cuts off the first few seconds… It’s not that the whole clip is delayed.

    Then if you replay the page it plays fine.

    Almost like a preloading problem???

  18. Pingback: Best of Edge Animate Workflow Samples « Heathrowe

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>