mouseover audio within jQuery

StackOverflow https://stackoverflow.com/questions/23485180

  •  16-07-2023
  •  | 
  •  

Question

So i have a page with an image that is un-clickable thanks to some nifty jQuery code. And I have an autoplay clip, but I want a whisking sound every time someone mouseovers moving image.

<!DOCTYPE html>
<html>
<head>
<title>Calculations</title>
<link href="style" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <div class="top">
        <audio controls autoplay>
        <source src="trombone2.wav" type="audio/wav">
        Your browser does not support the audio element.
        </audio>    

        <p>
            Our calculations show that your monitor is shitty, we advise you wipe the crap off your monitor preventing you from seeing anything that isn't blindingly bright. If that doesn't seem to make a difference click on the turd to run the adjustment algorithm.
        </p>
    </div>
        <a href="calc.html"> <img src="poop.png" width="100" height="100" alt="Grey Square" id="img" />

<script>
jQuery(function($) {
$('#img').mouseover(function() {
    var dWidth = $(document).width() - 100, // 100 = image width
        dHeight = $(document).height() - 100, // 100 = image height
        nextX = Math.floor(Math.random() * dWidth),
        nextY = Math.floor(Math.random() * dHeight);
    $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
});   
});   
</script>
</body>
</html>
Was it helpful?

Solution 

<script>
    var snd1 = new Audio("swish.mp3");  //1
    $(document).ready(function(){  //2
      $("#img").mouseover(function(){  //3
        var dWidth = $(document).width() - 100, // 100 = image width
            dHeight = $(document).height() - 100, // 100 = image height
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
        snd1.play();   //4
        snd1.currentTime=0;   //5
      });
    });
</script>

1 the first line creates a JS audio object

2 the document.ready part wait until the DOM is created to set up your event listener

3 The mouseover function works as expected - sets a mouseover event listener on #img

4 .play() plays the sound

5 .currentTime=0 re-queues the sound to the beginning for next use

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top