Looking for a crosssbrowser make sound when rollover div

I can't seem to find one that works across the browsers.
I just have two simple divs ( DIV-A) and (DIV-B) and would like a sound to work when rolled over.

I have found one that worked on IE but not on Firefox, I mean really? LOL

Thanks in advance.
colonelblueAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
What IE version
Can you use an HTML5 solution or does it have to support older browsers?
0
colonelblueAuthor Commented:
Hello Gary . IE9 and yes HTML5 would be OK.
0
GaryCommented:
http://jsfiddle.net/GaryC123/kcufcdsu/

<audio id="audio_test">
    <source src="http://demo.codesamplez.com/audio/pitbull.mp3" type="audio/mpeg">
        <source src="http://demo.codesamplez.com/audio/music.ogg" type="audio/ogg">
</audio>
<div id="hoverme">Hover me</div>

Open in new window

$("#hoverme").hover(function () {
    $("#audio_test").trigger('play');
}, function () {
    $("#audio_test").trigger('pause');
})

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

colonelblueAuthor Commented:
What am I doing wrong Gary?
JSFiddle works on both browsers
When I copy code to my pages it doesn't work on either.
Even copied to empty HTML page with just the provided code and nothing.
0
colonelblueAuthor Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <html>
    <body>
      
<audio id="audio_test">
    <source src="http://demo.codesamplez.com/audio/pitbull.mp3" type="audio/mpeg">
        <source src="http://demo.codesamplez.com/audio/music.ogg" type="audio/ogg">
</audio>
<div id="hoverme">Hover me</div>
    
      <script type="text/javascript">
   $("#hoverme").hover(function () {
    $("#audio_test").trigger('play');
},function(){
      $("#audio_test").trigger('pause');  
})
    </script>
    
    
    </body>
    </html>

Open in new window

0
GaryCommented:
You just need the jquery library as well

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<body>
  
<audio id="audio_test">
    <source src="http://demo.codesamplez.com/audio/pitbull.mp3" type="audio/mpeg">
        <source src="http://demo.codesamplez.com/audio/music.ogg" type="audio/ogg">
</audio>
<div id="hoverme">Hover me</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
<script type="text/javascript">
$(function(){
   $("#hoverme").hover(function () {
    $("#audio_test").trigger('play');
},function(){
      $("#audio_test").trigger('pause');  
})
})
    </script>

    </body>
    </html>

Open in new window

0
colonelblueAuthor Commented:
d'OH!
and that's why you're the expert.
YOU'RE KING Gary!

Thank you!
0
colonelblueAuthor Commented:
Gary GARY GARY!
0
colonelblueAuthor Commented:
Gary, I'm trying to apply it to this but it doesn't work.
What am I missing?

<div class="img2">                                   
             <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content --><img src="images/service.png" class="img2">
		</div>
		<div class="back">
			<!-- back content --><a href="Service.asp"><img src="images/service2.png" class="img2"></a>
		</div>
	</div>

Open in new window

0
GaryCommented:
Post the rest of the code (the audio tags and jquery specifically)
0
colonelblueAuthor Commented:
<audio id="audio_test">
    <source src="/CAB/audio/beep.mp3" type="audio/mpeg">
    <source src="http://demo.codesamplez.com/audio/music.ogg" type="audio/ogg">
</audio>
<div id="hoverme">Hover me</div>
    
      <script type="text/javascript">
   $("#hoverme").hover(function () {
    $("#audio_test").trigger('play');
},function(){
      $("#audio_test").trigger('pause');  
})
    </script>
          <script type="text/javascript">
   $("#img2").hover(function () {
    $("#audio_test").trigger('play');
},function(){
      $("#audio_test").trigger('pause');  
})
    </script>
            <div class="img2">                                   
             <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content --><img src="images/service_partners.png" class="img2">
		</div>
		<div class="back">
			<!-- back content --><a href="PR.asp"><img src="images/service_providers.png" class="img2"></a>
		</div>
	</div>
    </div>

Open in new window


Will that do? Should I open another ticket?
0
GaryCommented:
The DIV has a class named img2 not an ID

<script type="text/javascript">
$(function(){
	$(".img2").hover(function () {
		$("#audio_test").trigger('play');
	},function(){
		$("#audio_test").trigger('pause');  
	})
})
</script>

Open in new window

0
colonelblueAuthor Commented:
GARY - Thank you!!! :)
I'll do better to pay better attention.

Thank you so VERY much.
0
colonelblueAuthor Commented:
Hello Gary, I finally applied this effect to a rollover menu however when I roll out and roll back over the same button, I would had hoped it made the sound again but it doesn't Not until a few more attempts then it does.
Is there a way to make it so that rolling over the button as many as times as you wish makes the same beep sound attached?  Thanks again. :)
0
GaryCommented:
Add loop into the audio tag

<audio id="audio_test" loop>
0
colonelblueAuthor Commented:
Hey Gary. Thank you.
May I ask is there a way to just make it ding once it is hovered and stop as opposed to go ding ding ding while mouse is on it? BUt as soon you roll back over ding again - kinda kinky but in an out  lol - or for more like a piano key - one ding as touched once.

If not then maybe a way around is to add a pause OR elongate the sound file with empty sound? IDK.
What do you think Gary?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.