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:
Hey John,
Yes, this can be doable with Velo, which is a custom code interface for Wix websites.
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.
Won’t cost anything, its just a few lines of code.
Here you go:
$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.
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.
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.
ok so i have two pictures. this is the code for picture !
and this is the code for picture 2
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 .
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?
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:
Like mentioned earlier, you may need to click the first time in order to activate the audio player.
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!
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.
What do you suggest I do. I hate to have a play button i think its kinda cheesy.
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.
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.
$w('#image1').onMouseIn(() => {
$w('#audioPlayer1').play();
})
$w('#image1').onMouseOut(() => {
$w('#audioPlayer1').stop();
});