asked on

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.

Gary

What IE version
Can you use an HTML5 solution or does it have to support older browsers?

colonelblue

ASKER

Hello Gary . IE9 and yes HTML5 would be OK.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

colonelblue

ASKER

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.

colonelblue

ASKER

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

Gary

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

colonelblue

ASKER

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

Thank you!

colonelblue

ASKER

Gary GARY GARY!

colonelblue

ASKER

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

Gary

Post the rest of the code (the audio tags and jquery specifically)

colonelblue

ASKER

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

Gary

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

colonelblue

ASKER

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

Thank you so VERY much.

colonelblue

ASKER

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

Gary

Add loop into the audio tag

<audio id="audio_test" loop>

colonelblue

ASKER

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?