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
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
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.