Adding sound effect on hover

Question

Hello,

I am using this to add sound to my game (Harlowe).
I added a soundtrack to the startup passage, and I want to add sound effect on hover in specific screens.
I added the play track script but I am not sure how to connect it to the hover. 
I am an absolute beginner so i might need a detailed answer :)
Thanks!

 <div class="column w-40">
    <img src=https://i.pinimg.com/564x/5f/a5/37/5fa537f8d322b8b2e15749cf72c6fa14.jpg onmouseover="src='https://static.wixstatic.com/media/91a947_da703cd4e99a494dbcbcbea30147ac6d~mv2.gif'" style="max-width: 380px;margin-top:-40px; cursor: pointer;" >
	  <script>A.track('start').play();</script>
	
  </div>
</div>

  

Answer 1

I'm using SugarCube format, but I think what I used would still work for you (I am also a beginner).

I put this into my javascript section:

$(document.body).on("mouseenter", ".mickey", function () {
	$("<audio></audio>").attr({
			src      : "the url for my sound",
			autoplay : "autoplay"
	});
});

And in the passage I put:

<span class="mickey">[img[the url for my image][mickey]]</span>

I think there is a bit of delay which there may be a way to fix. I forget where I got this code, probably from a google search. You can just copy and paste it from here and add in the urls for your image and sound (I'm guessing you want the sound to play when you hover over a certain image). You can change the class name "mickey" to whatever you want, so long as you make it the same in the passage and in the javascript section.

Comments

I would probably recommend my <<mouseover>> macro for this so you can work within SugarCube's audio systems, which are better in general than using the equivalent HTML5 elements. One of the examples is playing a sound on mouseover. 

Likewise, it's probably better for OP to work within HAL than to use HTML5 for similar reasons. 

---

Splendid! I'll definitely be using your macros, thank you very much! Much more streamlined.

Answer 2

You can place the image in a hook and use the (mouseover:) macro. 

|hover>[ image goes here] 

(mouseover: ?hover)[
    <script>A.track('start').play();</script>
]