Jump to content

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

Recommended Posts

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!

screenshot_1.jpg

Link to comment
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!

screenshot_1.jpg

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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Let me a little time to check it

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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!).

Link to comment
  • 1 month later...

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.

image.png.c0b7f7a3dce31d96badb3df61d47959a.png

image.thumb.png.520b4c7b2c9be2d2ab5c03f1b05dbce4.png

 

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.

 

 

Edited by iamdavehart
updated the keyImages code as i'd missed the indexer out...

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 1 month later...
  • 4 months later...
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.