Adding a sound effect (WAV file) to an image click

Hello Squarespace community!  I am new at web designing and am not experienced with coding.  I am searching for a way to incorporate a sound effect on an image click.  My client wanted a keyhole image that you click on to access the specific page it is directed at.  I created the keyhole buttons by using a duplicate image set up as an image gallery.  I have a 0:02 second WAV file that I am trying to figure out how to add it to each image so that a sound effect of a key unlocking a door will sound when the image is clicked.  Is this possible for me to do...with no knowledge of coding?  I reached out to someone I know for help (they also helped with the coding for centering the image title), but they are not familiar with this and said it will require javascript...  If anyone knows of a code that would work or have some simple steps that I can follow along with, that would be so great!  Thank you in advance for any and all help provided!

4 hours ago, hollykdesign said:

Hello Squarespace community!  I am new at web designing and am not experienced with coding.  I am searching for a way to incorporate a sound effect on an image click.  My client wanted a keyhole image that you click on to access the specific page it is directed at.  I created the keyhole buttons by using a duplicate image set up as an image gallery.  I have a 0:02 second WAV file that I am trying to figure out how to add it to each image so that a sound effect of a key unlocking a door will sound when the image is clicked.  Is this possible for me to do...with no knowledge of coding?  I reached out to someone I know for help (they also helped with the coding for centering the image title), but they are not familiar with this and said it will require javascript...  If anyone knows of a code that would work or have some simple steps that I can follow along with, that would be so great!  Thank you in advance for any and all help provided!

With the requirement of playing WAV in your website, i think we need some javascript codes to implement.
One more thing, Kindly share your site with the protected password to check the issue together

Hi bangank36!  Thank you for your response!  We just went live with the website yesterday, although I am still working on rearranging some things for them.  Here is the website address...https://www.mcgookeylaw.com/  I am not sure how to share it with password protected now that it is live...?

If your site has went live, it is not necessary to set the protected password anymore.

Let me a little time to check it

Thank you!  I really appreciate your help!  Check it out when you have time.  I removed the gallery section and changed the key hole images to individual images, because I could not figure out a way to increase the padding width of the gallery block (the images were too large the way they were displayed in the gallery section and I wanted them to be smaller with white space on the sides).

I have been searching ways to make changes to the site, and have come across quite a few of your replies...thank you for taking the time to help the less experienced Squarespace designers!  Many thanks to you!  I may also be contacting you to find the best way to edit just the mobile version (for example, now that the key hole images on the home page are individual images, they appear in one column on the mobile version and I do not like that!).

Hello again!  I just wanted to check in with you to see if you figured anything out yet regarding the sound effect on the button click.  Thank you again for your time!

Hey,

You'll probably need a business or premium subscription to do this as it has code.

firstly you need to upload your file, so create a text box and insert a link. In the little link dialog click the cog and select File from the dialog and then upload your file. click close and this will give you a url to access your file. it will be something like "/s/key.wav". once you've uploaded it you can delete the link, the file is there now.

Now you can add the code. Insert a code block and do something like this. This is just a demo, so you'll need to provide your actual site to get it exactly right, but you can try this to get your sound file working:

<a href="#" id="linkToPlaySound">Click Me For Sound</a>

<script>
document.querySelector("#linkToPlaySound").onclick = function(e) {
  e.preventDefault();
  const audio = new Audio("/s/key.wav");
  audio.play();
}
</script>

this has two parts. 

• the first part is the link. you won't need this in your final code because you've got some key pictures or something like that, but use this first to get the sound playing
• the second part is the script. this finds the link and sets its click event to find the audio element and play it. note that it has our key.wav file. if yours is named differently change that code.

Once you've got that working we should edit it for your site. (but it's easier to debug the code block above first until you've got the sound playing).

On your site we need to target the section with the keys and attach our code to each of the URLs, we also need to make sure that the links aren't followed immediately otherwise you wont hear the sound it will just navigate to the other page.

using a code block on the page (the same one above if you want)

<script>

  function playKeySound(e) {
  	e.preventDefault();
    const clicked = e.target;
    const audio = document.querySelector("audio");
    audio.play();
    // now remove the handler and click it again
    // after enough time has elapsed to play the audio
    clicked.onclick = null;
    setTimeout(function() { clicked.click(); }, 2000);
  }
  
  const keyImages = document.querySelectorAll("section[data-section-id='615c8149fd9a9c637af255f4'] a.sqs-block-image-link");
  for (let i=0; i<keyImages.length; i++) { keyImages[i].onclick = keyHandler; }
  
</script>

this time round, we have a function that plays your key sound and then waits 2 seconds (2000 = milliseconds) and clicks the link a second time. After the function we go through every link in the relevant section on your website and assign that function to all of them so it doesn't matter which one you click.

Hopefully this works out, although I should point out that I'm really not sure about sound on websites unless its absolutely necessary. Putting it here for educational purposes though and I appreciate its a stylistic choice.

Thank you iamdavehart!  I appreciate your time and willingness to help!  I will give it a try!

Hey @iamdavehart, I'm actually trying to play a sound when clicking on text. I tried adding it as a link but when clicked it downloads the file instead of playing it. 

Any chance you could help guide me?

Thanks

On 5/26/2022 at 11:40 AM, mnrdgz said:

Hey @iamdavehart, I'm actually trying to play a sound when clicking on text. I tried adding it as a link but when clicked it downloads the file instead of playing it. 

Any chance you could help guide me?

Thanks

Can you share link to page where you have problem?