# I want to hover mouse over image and have it automatically play audio but there is nothing to do that in Wix Studio. They said I need code but I do not know how to write code. Is this possible?

**URL:** <https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789>\
**Category:** Ask the community\
**Tags:** wix-studio, code, question\
**Created:** [June 8, 2024, 9:41am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789 "2024-06-08T09:41:45Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 8, 2024, 9:41am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/1 "2024-06-08T09:41:45Z")

</div>

**Question:**  
I wan to hover mouse over image and have it automatically play audio but there is nothing to do that in Wix Studio. They said I need code but I do not know how to write code. Is this possible?

**Product:**  
wix studio

**What are you trying to achieve:**  
Trying to have music play over an image by clicking or hovering over it.

**What have you already tried:**  
Nothing will work

**Additional information:**

---

<div class="post-metadata">

**Author:** ![Pratham](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/pratham/32/119586_2.png) [@Pratham](https://forum.wixstudio.com/u/Pratham)\
**Post date:** [June 8, 2024, 1:53pm UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/2 "2024-06-08T13:53:07Z")

</div>

Hey John,

> [@John\_Morabito](#):
>
> They said I need code

Yes, this can be doable with Velo, which is a custom code interface for Wix websites.

---

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 8, 2024, 9:08pm UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/3 "2024-06-08T21:08:38Z")

</div>

How much do you charge for this, how long will it take and do you guarantee it will work. Reason I ask is I have no idea what code even is.

---

<div class="post-metadata">

**Author:** ![Pratham](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/pratham/32/119586_2.png) [@Pratham](https://forum.wixstudio.com/u/Pratham)\
**Post date:** [June 9, 2024, 5:57pm UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/4 "2024-06-09T17:57:22Z")

</div>

Won’t cost anything, its just a few lines of code.  
Here you go:

```javascript
$w.onReady(function () {

    $w('#image1').onMouseIn(() => {
        $w('#audioPlayer1').play();
    })

    $w('#image1').onMouseOut(() => {
        $w('#audioPlayer1').stop();
    });

});

```

However depending upon the user’s web browser, they might have to manually click the image for the first time in order to play the audio.

---

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 10, 2024, 12:26am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/5 "2024-06-10T00:26:12Z")

</div>

now for a really dumb question. how do i insert this into my wix document. I can show you the page if it will help.

 ![Screenshot 2024-06-09 at 5.25.42 PM](https://us1.discourse-cdn.com/wix/original/3X/1/c/1ccabc8447dec7ca0a68162b2961d46dc3da9dbc.jpeg)

---

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 10, 2024, 12:27am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/6 "2024-06-10T00:27:05Z")

</div>

this is what the page looks like and i want to hover over each image and have wix play a different song. there will only be two separate songs here.

---

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 10, 2024, 12:33am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/7 "2024-06-10T00:33:29Z")

</div>

ok so i have two pictures. this is the code for picture !

and this is the code for picture 2

---

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 10, 2024, 12:34am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/8 "2024-06-10T00:34:04Z")

</div>



---

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 10, 2024, 12:36am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/9 "2024-06-10T00:36:49Z")

</div>

sorry i don’t know why i am having trouble. here is the code for each the first is one

 ![Screenshot 2024-06-09 at 5.34.47 PM](https://us1.discourse-cdn.com/wix/original/3X/f/9/f96fae4968a013df65f7420d92771bb83d570c90.png)

---

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 10, 2024, 12:37am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/10 "2024-06-10T00:37:24Z")

</div>

and here is the second one

 ![Screenshot 2024-06-09 at 5.35.04 PM](https://us1.discourse-cdn.com/wix/original/3X/7/1/71b7c4a869d94723058cd58012b57165794c9ea5.png)

---

<div class="post-metadata">

**Author:** ![Aquarius\_Mike](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aquarius_mike/32/86255_2.png) [@Aquarius\_Mike](https://forum.wixstudio.com/u/Aquarius_Mike)\
**Post date:** [June 10, 2024, 4:57am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/11 "2024-06-10T04:57:55Z")

</div>

Hi Jhon,  
Is that two elements in your image are 3D elements made in Spline or blender?  
If it is, I guess you should add hover event in the respective 3D element makers because it might stop mouse events for your embed HTML element.  
Or Wrap the embed code with a container and use the onMouseIn code mentioned by @Pratham .

---

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 10, 2024, 7:44am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/12 "2024-06-10T07:44:20Z")

</div>

Help Mike. I don’t have a clue what I am doing here and when I called Wix they said they cannot help because they dont do any coding. Can you assist with this issue?

---

<div class="post-metadata">

**Author:** ![Pratham](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/pratham/32/119586_2.png) [@Pratham](https://forum.wixstudio.com/u/Pratham)\
**Post date:** [June 10, 2024, 9:55am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/13 "2024-06-10T09:55:24Z")

</div>

> [@John\_Morabito](#):
>
> ok so i have two pictures.

No this is NOT a picture.  
This is a is a 3D Spline embed.

You will need to add two audio player elements for both the images, with their respective soundtrack.

Here’s a demo:

> **[Wix Audio Player Demo by PREZTECH](https://preztech.editorx.io/lightning/ur/play-music-on-hover)**
>
> This demo shows how to play music when you hover over an element.

Like mentioned earlier, you may need to click the first time in order to activate the audio player.

---

<div class="post-metadata">

**Author:** ![Aquarius\_Mike](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aquarius_mike/32/86255_2.png) [@Aquarius\_Mike](https://forum.wixstudio.com/u/Aquarius_Mike)\
**Post date:** [June 10, 2024, 4:36pm UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/14 "2024-06-10T16:36:50Z")

</div>

Use the real image with PNG,jpg,jpeg .etc formats instead of spline. If you’re going to use the spline element anyway, you need to add the soundtrack in spline design file because it’ll be a mess when you use mouse event in both html embed and Audio player!

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [June 11, 2024, 1:36am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/15 "2024-06-11T01:36:55Z")

</div>

Hi John. To play music, some kind of user interaction in the browser might be necessary, such as a click. In the case you’re attempting, since you are using an HTML component, you need to be aware that it is a separate HTML entity embedded within Wix. This means, as Mike mentioned, each HTML component might require its own user interaction, such as a click. (I haven’t personally tried this, so I’m not entirely sure.) If you could use a custom element instead of an HTML component, a single click for the entire site might suffice. However, this would require implementing the animation using custom elements, which significantly increases the difficulty. As Mike suggested, it might be wise to aim for a simpler implementation first.

---

<div class="post-metadata">

**Author:** ![John\_Morabito](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john_morabito/32/92895_2.png) [@John\_Morabito](https://forum.wixstudio.com/u/John_Morabito)\
**Post date:** [June 11, 2024, 3:09am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/16 "2024-06-11T03:09:19Z")

</div>

What do you suggest I do. I hate to have a play button i think its kinda cheesy.

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [June 11, 2024, 6:24am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/17 "2024-06-11T06:24:18Z")

</div>

I don’t think the user necessarily has to press the play button of the audioPlayer directly. Even with Wix’s native elements, as Mike did, you can play music with .play(). In other words, you can press a different button you’ve created and execute $w(“#audioPlayer”).play() in its .onClick() event handler to play the music. You can hide the audioPlayer element itself with .hide(). The reason why browsers don’t allow music to play automatically is that it can be inconvenient for users if music starts playing the moment they open the site. Therefore, if you ask the user to press a button, such as one labeled “Allow this site to play music,” and play a silent audio file at that moment, it might be considered as obtaining permission to play music. After that, you might be able to play music at any time you want using $w(“#audioPlayer”).play() (in your case, within the onMouseIn() event handler). I have implemented this method using custom elements, and it worked. However, I haven’t tested whether the same thing can be done with Wix’s native audioPlayer. I used custom elements because it was impossible to overlap multiple pieces of music or sound effects with Wix’s native audioPlayer. If you only need to play music separately, the method of playing silent music in the background beforehand might work.

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [June 11, 2024, 6:37am UTC](https://forum.wixstudio.com/t/i-want-to-hover-mouse-over-image-and-have-it-automatically-play-audio-but-there-is-nothing-to-do-that-in-wix-studio-they-said-i-need-code-but-i-do-not-know-how-to-write-code-is-this-possible/59789/18 "2024-06-11T06:37:33Z")

</div>

As a specific method, when users open your site, you can first have them open a full-screen lightbox that contains buttons labeled “Allow this site to play music” and “Do not allow.” Whether they allow it or not, make sure the lightbox closes afterward. If the “Allow” button is clicked, set the audioPlayer element with a silent audio file and call .play() in the button’s .onClick() event handler. (You could also play a light sound effect here if it is acceptable for sound to be heard.) This will grant permission to play music from the user. After that, as others have suggested, you can probably achieve your goal with code like the following.

```javascript
    $w('#image1').onMouseIn(() => {
        $w('#audioPlayer1').play();
    })

    $w('#image1').onMouseOut(() => {
        $w('#audioPlayer1').stop();
    });

```