Does anyone know how to play a a sound file when you move your cursor over an image or text, also known as mouseover or hover?

We occasionally post some good jokes, as well as others that deserve the classic Joke Drum Roll and Cymbal crash to denote a bad one.

I've found a number of "how to do it" references that seem promising, but do not have the technical expertise to know how to implement them, if it is even possible.

Link #1

Link #2

MediaElementsjs.com which is a plugin

Installation Instructions for MediaElements.js but appears to be geared for WordPress or Drupal based websites and appears to require access to .htaccess.

Am I correct that we don't have access to .htaccess?

I've got a short sound clip so all I need is a play on hover and not necessarily a "sound off on exit".

Anyone know how to do this?

User has to set option to allow sounds automatically. If you don't mind it not working for those that blocked, etc, it's not difficult. This was done in the last few years. It's actually much simpler than the links you gave. You'll be surprised how simple.

This is sample page demo PAGE. I made an image that plays a sound and changes image size when you hover and exit over image.

This is the code
<audio id="myAudio"> <source src="https://orangefreesounds.com/wp-content/uploads/2017/11/Short-beep-noise.mp3"> Your browser does not support the audio element. </audio> <script> var mysound = document.getElementById("myAudio"); function bigImg(x) { x.style.width = "100%"; mysound.play(); } function normalImg(x) { x.style.width = "50%"; mysound.pause(); } </script> <p> <img alt="airplane" src="/000/2/2/9/38922/userfiles/image/f5b745692337fd29a4f22dd864f8bdf7%5B1%5D.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" /></p>

Jack,

Thank you very much! I've got it set up on my home page, the last joke under the photos if you'd like to see it. Look for the cymbal.

How would I implement a mouse triggered change of image on mouseover mouseoff?

Not sure what you mean by "change of image". If it changes via a script then the script can have that added. There might be a hook that can be inserted into a section, but I've not done anything like that yet to an existing area that I have no direct control over.

That basic code is not limited to an image. Here's how to apply it to any section of text - same script as before.

<div onmouseout="normalImg(this)" onmouseover="bigImg(this)" > some text</div>

So anything you 'wrap' with that div would trigger the mouse events.

Jack Vermeulen wrote:

Thanks for stopping by! As you saw, I'm starting with the static image of a cymbal and your script does cause some motion, that is, the change of size. I could be happy with that, but what I'd really like to do is use that image, then, when we mouse-overed, have the image change to show a cymbal that has been struck, and moves to a different angle as it plays the sound, then moves back to the original image on mouse-off/exit.

Ideally, I'd like to find a GIF image that shows a moving image of a drum roll with a cymbal crash, but so far, I have not found what I'm looking for. I'm assuming we can call a GIF image as easily as a JPG or PNG image?

Yeah, that's pretty easy since one is in charge of the code. I thought you meant some slideshow that you didn't make. I'll make a demo.

Same demo link this is code. You can put any sort of image there including GIF. Plus one can make an array and the images progress and so on. (an array like JVideoplayer uses to make a list of videos).

This has animated cymbal and sound.

<p> <audio id="myAudio"><source src="https://www.classcreator.com/000/2/2/9/38922/userfiles/file/MP3/China-Cymbal-Crash-Level-5A-www.fesliyanstudios.com.mp3" /> Your browser does not support the audio element.</audio> <script> var mysound = document.getElementById("myAudio"); function bigImg(x) { x.style.width = "300px"; x.src="https://i.gifer.com/7Ku9.gif"; mysound.play(); } function normalImg(x) { x.style.width = "300px"; x.src="https://www.classcreator.com/000/2/2/9/38922/userfiles/image/Screenshot_2021-04-28%20image%20of%20cymbal%20animated%20gif%20-%20Google%20Search.png"; mysound.pause(); } </script></p> <p><img alt="" image="" onmouseout="normalImg(this)" onmouseover="bigImg(this)" src="https://www.classcreator.com/000/2/2/9/38922/userfiles/image/Screenshot_2021-04-28%20image%20of%20cymbal%20animated%20gif%20-%20Google%20Search.png" width=300px/></p> <div nmouseout="normalImg(this)" onmouseover="bigImg(this)" style="text-align: center;"><span style="font-size:20px;"><span style="font-family:comic sans ms,cursive;">some text</span></span></div>

You can add the drum roll

Here's the one I've got Drum Roll Cymbal Crash

That sounds great. You might want to use an MP3 version, it's 40kb vs 318kb

Here's the MP3 version
https://www.classcreator.com//000/2/2/9/38922/userfiles/file/MP3/Stinger.mp3

Thanks Jack