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.
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
You can do it by adding
mouseoverevent 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 usemouseoverand there you should callbuzzSound.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.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!!!
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
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.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.
@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.
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.
Love this tutorial, its exactly what I was searching for, you are the best !!!
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
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!
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
Love this tutorial, it realy works great and I also managed to trigger sounds with actions in Symbols
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.
Did you ever tried, to make this demo a phonegap android app? I tried, but I can´t make it work.
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!!
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
Here it is guys: zipped project
Thanks much. I entered the code exactly as the tutorial specified and I obviously did something wrong. Even though I got no code error, I also got no sound and no animation. Nothing. So, now I can double check my work and see where I went wrong. .
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.
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
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.
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…
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.
Great tutorial! Thank you so V-E-R-Y much for helping me get some audio with my simple little Edge animation .
Looking forward to the day when I can learn how to get audio on my site to play on mobile devises.
http://www.dirtyrat.co
CHEERS! Lanny
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
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
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???