# Interactive Sound design

**URL:** https://forum.readymag.com/t/interactive-sound-design/915
**Category:** Custom code
**Created:** [November 14, 2022, 11:30am UTC](https://forum.readymag.com/t/interactive-sound-design/915 "2022-11-14T11:30:24Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![reqda](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/reqda/32/600_2.png) [@reqda](https://forum.readymag.com/u/reqda)
#### Post date: [November 14, 2022, 11:30am UTC](https://forum.readymag.com/t/interactive-sound-design/915/1 "2022-11-14T11:30:24Z")

</div>

Hello everyone,

I would like to know **how to activate a sound whenever I hover over an icon** , without having to click or have the Readymag sound widget displayed (SoundCloud thumbnail too big to hide).

Can you guys help me ?  
Thaaanks 🤙✨

---

<div class="post-metadata">

### Author: ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)
#### Post date: [November 16, 2022, 4:46pm UTC](https://forum.readymag.com/t/interactive-sound-design/915/2 "2022-11-16T16:46:55Z")

</div>

Hey, you have to find out how to address your icon element, depending on how you created it.  
Here I adress it using the class selector “.icon”.

Put this in a custom code widget:

```auto
<audio id="mp3" src="addyourURL"></audio>

<script>
var audio1 = $("#mp3")[0];
var icon = $(".icon"); //----- exchange this to your icon.

 //Play the file when the mouse leaves the icon
         icon.mouseover (function (){
                audio1.play();
         });

 //Pause the file when the mouse leaves the icon
         icon.mouseleave (function (){
               audio1.pause();
         });

```

```

---

<div class="post-metadata">

### Author: ![jpgninja](https://avatars.discourse-cdn.com/v4/letter/j/ea666f/32.png) [@jpgninja](https://forum.readymag.com/u/jpgninja)
#### Post date: [July 7, 2023, 3:15pm UTC](https://forum.readymag.com/t/interactive-sound-design/915/3 "2023-07-07T15:15:14Z")

</div>

Is there any tutorial about this topic? I also would like to include sounds in my buttons, seems like an obvious feature that is missing. thanks.

---

<div class="post-metadata">

### Author: ![LAVERN](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/lavern/32/1554_2.png) [@LAVERN](https://forum.readymag.com/u/LAVERN)
#### Post date: [December 4, 2023, 9:57pm UTC](https://forum.readymag.com/t/interactive-sound-design/915/4 "2023-12-04T21:57:00Z")

</div>

I’m interested in this as well. Have you found anything?

Thanks.

---

<div class="post-metadata">

### Author: ![anais.maxine](https://avatars.discourse-cdn.com/v4/letter/a/c67d28/32.png) [@anais.maxine](https://forum.readymag.com/u/anais.maxine)
#### Post date: [September 10, 2026, 4:46pm UTC](https://forum.readymag.com/t/interactive-sound-design/915/5 "2026-09-10T16:46:11Z")

</div>

Hi! I was wondering if it worked for you?

I would like to do the same but don’t know how to upload the mp3 for the code.

Would be very grateful for some help!

Thank yooou