• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

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.
0
colonelblue
Asked:
colonelblue
  • 10
  • 6
1 Solution
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 10
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now