Question

I am unsure why this script is not working as it should I think and when I run it no errors happen. I am also running qTip 2 if that makes any difference as to how this script interacts.

Here are my scripts.

JS

    <script type="text/javascript">
var $j = jQuery.noConflict();

var growlSound = $j("#growlSound")[0];
$j("#growl")
    .mouseenter(function() {
            growlSound.play();
    });

var laughSound = $j("#laughSound")[0];
$j("#laugh")
    .mouseenter(function() {
            laughSound.play();
    });

</script>

HTML

<audio id="growlSound" preload="auto">
                            <source src="/messages4u/2011/images/october/growl.ogg">
                            <source src="/messages4u/2011/images/october/growl.mp3">
                            Your browser does not support HTML5 Audio. Please Upgrade Your Browser.
                    </audio>
                            <audio id="laughSound" preload="auto">
                            <source src="/messages4u/2011/images/october/laugh.ogg">
                            <source src="/messages4u/2011/images/october/laugh.mp3">
                            Your browser does not support HTML5 Audio. Please Upgrade Your Browser.
                    </audio>
    <p><img src="/messages4u/2011/images/october/halloween4.jpg" width="600" border="0" usemap="#Map" class="center" style="width: 600px;" />
      <map name="Map" id="Map">
        <area class="growl" id="growl" style="cursor:default;" shape="rect" coords="117,118,225,223" href="#" />
        <area class="laugh" id="laugh" style="cursor:default;" shape="rect" coords="255,244,308,292" href="#" />
      </map>
</p>

As You can see I am attempting to play audio on a mouseover event. I cannot get this to work and yet I am unsure where the error lies.

UPDATE – It appears the mouseenterevent is not working.

Answer 1

There might be some other factors in play. I created a simpler example here; seems to be working (in Chrome):

http://jsfiddle.net/5PnCt/2/

It could be that:

• Your audio files aren’t correctly linked
• You are, somehow, failing to trigger the mouseenter event
• You aren’t correctly binding the event

To test the second case, add something like:

        console.log('playing');

…to one of your mouseenter handlers. If the event is triggered, you should see the log message.

For the third case, make sure that you either put your scripts AFTER the HTML they affect, or you use the following wrapper to make sure they don’t execute until the HTML loads:

var $j = jQuery.noConflict();
$j(document).ready(function(){
    ...code goes here...
});

You can’t select and bind events to an element if it doesn’t exist on the page, so the order of your code is important. Using document.ready is one way to get around this issue; it tells jQuery to wait until the page completely loads before attempting to execute the script.