11 Replies Latest reply on Jun 3, 2014 5:50 AM by LynnGreenbauer

    Stop sound on mouseout - How/where to add code

    LynnGreenbauer Level 1

      I've read through several threads but I can't figure out how or where to add the code to get the sound to stop on mouseout. I've read posts that buzz.js might be able to help, but I need guidance for applying it.

       

      The project is attached for download. The US Landmarks each have an animation that starts on mouseover and stops on mouseout. I need the sound that goes with each animation to do the same.

      Firefox handles the sound OK at first but then seems to get glichy. Chrome keeps looping every sound as soon as I mouseover.

       

      https://www.dropbox.com/s/x2iih9sgqff316i/SummerTips_052114_0430.zip  I apologize for the large file. I'm looking for an alternative to the one sound file that is over 6MB.

       

      This is my first project in EA. I've been learning EA as I build it (converting Flash project someone else did a few years ago). I'm sure there are more efficient ways to do a lot of what I have here, but it's working the way it needs to except for the sound.

       

      I'm open to any and all suggestions. Thanks in advance for the help.

       

      Lynn

        • 1. Re: Stop sound on mouseout - How/where to add code
          Preran Adobe Employee

          Hi LyreenGreenbauer,

           

          Doing my bit until an expert steps in. Can you have a look at this one?

           

          audio - Javascript play sound on hover. stop and reset on hoveroff - Stack Overflow

           

          Thanks,

          Preran

          • 2. Re: Stop sound on mouseout - How/where to add code
            resdesign Adobe Community Professional & MVP

            I cannot download your file right now. Could you post the code your have on the mouseover? Also I would use mouseenter and mouseleave instead.

            • 3. Re: Stop sound on mouseout - How/where to add code
              LynnGreenbauer Level 1

              Thanks Preran. I will take a look.

              • 4. Re: Stop sound on mouseout - How/where to add code
                LynnGreenbauer Level 1

                Hi Redesign,

                 

                I actually am using mouseenter and mouseleave. I submitted this at 5am this morning and obvoiusly wasn't awake enough to be posting.

                 

                Here's the code I have in compositionReady for one of the animations (they all mimic this):

                sym.$("space_needle").mouseenter(function(){

                    sym.getSymbol("space_needle").play("enter");

                });

                sym.$("space_needle").mouseleave(function(){

                    sym.getSymbol("space_needle").play("exit");

                });

                 

                I have no code for the sounds, they are all on their respective animation's timeline.

                 

                I had a thought after I posted this, since I already have a mouseleave function on the animation, could I just add the stop code for the audio to this?

                 

                Thanks!

                • 5. Re: Stop sound on mouseout - How/where to add code
                  resdesign Adobe Community Professional & MVP

                  To play sound on mouseenter use this:

                  sym.$("YourSoundName")[0].play();

                  In order to stop them and reset them to the beginning you need to use this

                  on mouseleave

                  sym.$("YourSoundName")[0].currentTime = 0;

                  sym.$("YourSoundName")[0].stop();

                  1 person found this helpful
                  • 6. Re: Stop sound on mouseout - How/where to add code
                    LynnGreenbauer Level 1

                    To confirm, for this code to work the sound files need to be converted to symbols. This should work for Chrome right? That's where the biggest issue is with sound.

                     

                    Thanks Redesign.

                     

                    Lynn

                    • 7. Re: Stop sound on mouseout - How/where to add code
                      resdesign Adobe Community Professional & MVP

                      Not at alll. You need to include them in the media folder and then you need to drag them on the stage. If they are included in a symbol you will need to use the correct path for a symbol

                      sym.getSymbol().$("YourSoundName")[0].play();

                       

                      Let me know if you need more help.

                      1 person found this helpful
                      • 8. Re: Stop sound on mouseout - How/where to add code
                        LynnGreenbauer Level 1

                        I haven't been able to get back to this job and try the code yet. I will let you know and put up a link when I put the code in. Thanks again.

                        • 9. Re: Stop sound on mouseout - How/where to add code
                          LynnGreenbauer Level 1

                          Hi Redesign,

                           

                          I've FINALLY been able to get back to this job. I've applied your code to the 3 landmarks on the right (New Orleans, Liberty Bell, and Space Shuttle). I only added the code to these 3 because 1) I have a sense I may be making it more complicated that it needs to be, and 2) Adding the code the way I did is still not fixing the issue with Chrome. This works fine in Firefox and Safari, even without adding the code, but in Chrome, once a sounds starts, it won't stop until you hit refresh.

                           

                          Link to download files:

                          Dropbox - 10508-SDT Animated HTML_060214.zip

                           

                          Snippet of code using:

                          sym.$("space_shuttle").mouseenter(function(){

                              sym.getSymbol("space_shuttle").play("enter");

                              sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].play("enter");

                              sym.$("space_shuttle").css("z-index",0);

                          });

                          sym.$("space_shuttle").mouseleave(function(){

                              sym.getSymbol("space_shuttle").play("exit");

                              sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].currentTime = 0;

                              sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].stop("exit");

                              sym.$("space_shuttle").css("z-index",0);

                          });

                           

                          Thanks in advance for your continued help.

                           

                          Lynn

                           

                           

                          PS. Is there a way to change my original post to say "mouseenter" instead of "mouseout" to be more accurate for others who are searching?

                          • 10. Re: Stop sound on mouseout - How/where to add code
                            jbowden Adobe Employee

                            Hi there,

                             

                            There are a couple of errors in your code above:

                             

                            In mouseenter event:

                            sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].play("enter");

                             

                            There's no "enter" label for the audio element. It should be:

                            sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].play();

                             

                            The bigger issue is in the mouseleave event:

                            sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].stop("exit");

                             

                            The audio element doesn't have a stop method. You should use pause, and again with no label in there, like this:

                            sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].pause();


                            hth,

                            Joe

                            • 11. Re: Stop sound on mouseout - How/where to add code
                              LynnGreenbauer Level 1

                              Thanks Joe. Works like I need it to in Chrome, locally anyway. Still working with my Web master on getting the sound (for all browsers) to work once it's up on the server and live. That's for another thread.

                               

                              Here's an example of the completed working code I used for anyone referencing this:

                               

                              sym.$("space_shuttle").mouseenter(function(){

                                  sym.getSymbol("space_shuttle").play("enter");

                                  sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].play();

                                  sym.$("space_shuttle").css("z-index",0);

                              });

                              sym.$("space_shuttle").mouseleave(function(){

                                  sym.getSymbol("space_shuttle").play("exit");

                                  sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].currentTime = 0;

                                  sym.getSymbol("space_shuttle").$("Spaceshuttlelift-off")[0].pause();

                                  sym.$("space_shuttle").css("z-index",0);

                              });