mouseover audio within jQuery

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>

ooops, so i'm not sure how to code the sound effect. I'm feeling like its going to have to be jQuery but I dont really know how to write this stuff :( — newby JP, May 06 '14 at 02:52
take a look at this link... http://stackoverflow.com/questions/8489710/play-an-audio-file-using-jquery-when-a-button-is-clicked — Josh Engelsma, May 06 '14 at 02:55
the problem is its not for a click, its for the mouseover, if you load up my page you will see how it jumps before you can click it. Its a joke... so the sound will make the user frustrated because it whisks away before he gets a chance to click it. --unless misinterpreted the link you sent me. — newby JP, May 06 '14 at 03:02

JRulle · Accepted Answer · 2014-05-06T03:41:34.247

<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

mouseover audio within jQuery

1 Answers1