millarosa

On 12/1/2021 at 12:05 PM, iamdavehart said:

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.

 

 

Hi Dave! 

I am trying to add sound effects when hovering over the movable images on my landing page https://www.millamihaljevich.com/  (just out of curiosity, not to keep forever). I was able to successfully add the first part of code from your response above, where you click a link that plays the audio, but I am unable to get the second part working and link this sound to my images.  The "images" are actually thumbnails from hidden blog posts as that was the only way to get them to move. 

I am extremely new to Squarespace in general and just trying to further educate myself, so I'm not sure what steps I am missing or what I could be doing wrong! Any help would be greatly appreciated, thanks.