Adding audio to an image with animations

Helpdesk Website Builder
1

Hi there!

I have three images on my website’s homepage that use sitejet’s element animations to bounce around when you click them. Ideally, I’d like to be able to click on the image and have it play corresponding audio snippet.

I have tried playing around with some html code, but can’t quite figure out how to attach it to the images I already have on the site. I’m not sure how I’d connect them so that the original animation functions still play, and the audio plays when you click it too.

Any help appreciated, thank you kindly!

~Peach

1 Like
2

Hello Peach,

I don’t really know how JavaScript works on Sitejet, but that’s probably where we should be digging.

Basically, all you need to do is write a small JavaScript script that does the following:

  1. Loads the (invisible) audio element onto the page.
  2. Attaches an event listener to the image click that launches the animation.
  3. When this element is clicked, the script asks the audio element to play.

To do this, we’d need to analyze the site’s JavaScript construction to make a complete implementation. If you know a little JavaScript, you might be able to do this using your browser’s inspector? If not, maybe Chat GPT can do the analysis for you and find suitable code.

I’m no expert, but if you can’t find it, I’m willing to try on my own to find some code.

I hope this helps.

Adrien

3 Likes
3

Hey @Peach and @Adrien :waving_hand:

Adrien — you were totally on the right track! You explained the core idea perfectly. Yes, Sitejet does allow custom JavaScript, so we can definitely get this working without breaking the bounce animation.

Peach — here’s a super simple way to do it:

:paw_prints: Play Audio When Clicking Your Images (and keep animations working)

  1. Upload your audio files to Sitejet (under Assets → Files).
  2. Add this code to your site — either in a code element on the page or in the global custom code section (just make sure it’s inside <script> tags if added globally):

html

<audio id="dogSound" src="/files/dog.mp3"></audio>
<audio id="catSound" src="/files/cat.mp3"></audio>
<audio id="sharkSound" src="/files/shark.mp3"></audio>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const dog = document.querySelector("#dog-image");
    const cat = document.querySelector("#cat-image");
    const shark = document.querySelector("#shark-image");

    dog?.addEventListener("click", () => {
      document.getElementById("dogSound").play();
    });

    cat?.addEventListener("click", () => {
      document.getElementById("catSound").play();
    });

    shark?.addEventListener("click", () => {
      document.getElementById("sharkSound").play();
    });
  });
</script>

Just make sure each image has an ID like dog-image, cat-image, etc. You can set this in Sitejet using the Inspector.

Let me know if you need help matching this to your current setup. Happy to tweak it!

And @Adrien — awesome of you to jump in and offer help. The Sitejet community needs more of that. :raising_hands:

3 Likes
4

Hi @Adrien_Uriel,

Thank you so much for your thorough reply! I don’t have much experience with javascript other than finding working scripts online and using them :laughing: I had found a basic script that plays audio on click, but the part that stumped me the most was figuring out how to connect the existing animation elements to it.

Your breakdown of what needs to happen really helped, so thanks again and I hope you have an awesome day! ~Peach

1 Like
5

Hi @Kalisperakichris,

Thank you so so much for going through my inquiry, this was exactly what I was looking for! I added the IDs to each of the images and plugged the code into the global html and it works perfectly. Both yours and @Adrien_Uriel 's responses really helped me implement and understand the script a little better, so I thank you both again for taking your time to reply to my request!

All the best, ~Peach :partying_face:

2 Likes