JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<audio id="growlSound" preload="auto">
   <source src="http://www.robtowns.com/music/blind_willie.mp3">
   <source src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg">
   Your browser does not support HTML5 Audio. Please Upgrade Your Browser.
</audio>
       
<img src="http://placehold.it/600x600" width="600" border="0" usemap="#Map" height="600" />
<map name="Map" id="Map">
  <area class="growl" id="growl" style="cursor:default;" shape="rect" coords="117,118,225,223" href="#" />
</map>

JavaScript

var $j = jQuery.noConflict();

var growlSound = $j("#growlSound")[0];

$j("#growl")
    .mouseenter(function() {
            growlSound.play();
            console.log('playing');
    });