How can I play audio when hovering over elements in the website?

Site URL: https://www.smegmaxrpl.com

Is there any code I can use that would allow me to play audio as I hover the curser over images? I also want to make sure that the audio doesn't bleed & overlap if quickly moving through images.

This may not be much of an issue as the soundbite is a short digital beep. If it's easier to disregard the overlap issue, that's perfectly fine.

smegmaxrpl.com

Password: Agamemnox890 

If it's too complicated, can anyone steer me in the right direction of a site or service that can help me with this?

Thank you.

I don't have code for hover, but if click image > play audio, I can provide code.

17 hours ago, tuanphan said:

I don't have code for hover, but if click image > play audio, I can provide code.

yeah please can you provide?

9 hours ago, Agamemno said:

yeah please can you provide?

You can follow these

#1. First, you need to find Image Block

In my example, it is: #block-027422632c7a0dd099da

#2. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    let audio = new Audio('https://www.w3schools.com/tags/horse.ogg');
    let isPlaying = false;
    $('#block-027422632c7a0dd099da').click(function () {
        if (isPlaying) {
            audio.pause();
        } else {
            audio.play();
        }
        isPlaying = !isPlaying;
    });
    audio.onended = function () {
        isPlaying = false;
    };
});
</script>

#3. Remember to replace Image Block ID + Audio URL

2 hours ago, tuanphan said:

You can follow these

#1. First, you need to find Image Block

In my example, it is: #block-027422632c7a0dd099da

#2. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    let audio = new Audio('https://www.w3schools.com/tags/horse.ogg');
    let isPlaying = false;
    $('#block-027422632c7a0dd099da').click(function () {
        if (isPlaying) {
            audio.pause();
        } else {
            audio.play();
        }
        isPlaying = !isPlaying;
    });
    audio.onended = function () {
        isPlaying = false;
    };
});
</script>

#3. Remember to replace Image Block ID + Audio URL

So it worked for every image that sends you to an external site. However, for some reason, it does not work for images that send you to pages within the website itself.

For example, for the "about me" button (image) that takes you to the "about me" page within the site it does not work.

Same for the pre-sale Image that takes you to the Presale page within the site.

Ok, so it technically is working now for the images that go to the pages inside of the website but, since it's not loading an external page, it cuts the sound off almost immediately to load the next page.