Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

Posted

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 

  • Replies 7
  • Views 182
  • Created
  • Last Reply

Top Posters In This Topic

Posted
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

image.png.38cb696e841e011f5d6f9e8822140009.png

#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>

image.png.0c5ec331b049534506a5a0bfb0fba12d.png

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

image.png.36657e314059d1d520acbb6de85e270f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted (edited)
2 hours ago, tuanphan said:

You can follow these

#1. First, you need to find Image Block

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

image.png.38cb696e841e011f5d6f9e8822140009.png

#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>

image.png.0c5ec331b049534506a5a0bfb0fba12d.png

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

image.png.36657e314059d1d520acbb6de85e270f.png

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.

Edited by Agamemno
Posted (edited)

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.  

Edited by Agamemno

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.