Audio Play On Image Hover

What’s the simplest way to get audio to play and pause and play and pause as you hover and hover off of an image, inside webflow? I want to help my friend who is an audio engineer represent sound in his website this way. I want to hook this up to the CMS potentially to simplify things for him as he adds new sounds and images in the future.

Any Info helps, thanks everyone :slight_smile:

1 Like

only know how to do the on click. maybe a simple change instead of an on click to on hover will work in the code. Definitely, not a code expert but with help from @samliew and @PixelGeek have managed to integrate some cool js scripts into webflow projects. This was a mockup for a possible client

http://incursion.webflow.io/ working site - the script is viewable on page with SEO details.
https://preview.webflow.com/preview/incursion?preview=094afd09714c7f1de5f28ddbe7846251

This one also has the coded CMS slider. You helped find a simpler solution for.

always
Jer

1 Like

Awesome! Thanks :slight_smile: I will check this out for sure! Just starting to learn JS myself actually.

Hi there! I’d love to achieve this effect too!

So far I’ve managed to get a hammer .svg to hit an anvil .svg when I hover on the hammer, but adding a ‘clang’ sound would be the icing on the cake!

Jeremy’s links are taking me to 404s - understandably, since the original post was five years ago. I’m wondering how difficult/easy this would be to achieve…?

I really relate to wanting sound as a small interaction detail rather than a full audio feature man!

So check it, I’m researching how people approach sound feedback like hover effects in Webflow and where it gets tricky.

If you’re open to a quick chat I’d love to hear how you think about using sound like this.