Play audio clip when hovering over portfolio links

I figured out a solution so just wanted to share in case someone else has the same question in the future.

Just to be clear, this solution is specifically for Portfolio Page (Hover: Background) in Squarespace 7.1, so not sure if it would work for any other portfolio layout, and it requires you to have a Business Plan or higher (so you can add custom code injection).

Step 1.

Upload the audio files you want to use with File Manager. Here's a further explaning how that works: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Essentially you can use any link or button to access this. The name of your audio file (as it is saved on your computer) will be the name of your audio file in Squarespace, and in the next step you need to replace the links in the script with the correct URLs linking to your audio files.

https://yourdomain.squarespace.com/s/youraudiofile.mp3
the bold parts will be your own squarespace URL and audiofile

Step 2.

Paste the following script into your Header section in page code injection.
(This can be found under Pages > Utilities > Code Injection.)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      // Preload your audio files
      const audioFiles = {
        1: new Audio('https://yourdomain.squarespace.com/s/youraudiofile1.mp3'),
        2: new Audio('https://yourdomain.squarespace.com/s/youraudiofile2.mp3'),
        3: new Audio('https://yourdomain.squarespace.com/s/youraudiofile3.mp3'),
        4: new Audio('https://yourdomain.squarespace.com/s/youraudiofile4.mp3')
      };

      function playAudio(index) {
        const audio = audioFiles[index];
        if (audio) {
          audio.currentTime = 0;  // Reset the audio to the start
          audio.play();           // Play the audio
        }
      }

      function stopAudio(index) {
        const audio = audioFiles[index];
        if (audio) {
          audio.pause();           // Stop the audio
          audio.currentTime = 0;   // Reset the audio to the start
        }
      }

      // Add event listeners for each portfolio item
      $('li:nth-child(1) a.portfolio-hover-item').on('mouseenter', function() {
        playAudio(1);
      }).on('mouseleave', function() {
        stopAudio(1);
      });

      $('li:nth-child(2) a.portfolio-hover-item').on('mouseenter', function() {
        playAudio(2);
      }).on('mouseleave', function() {
        stopAudio(2);
      });

      $('li:nth-child(3) a.portfolio-hover-item').on('mouseenter', function() {
        playAudio(3);
      }).on('mouseleave', function() {
        stopAudio(3);
      });

      $('li:nth-child(4) a.portfolio-hover-item').on('mouseenter', function() {
        playAudio(4);
      }).on('mouseleave', function() {
        stopAudio(4);
      });
    });
  })(jQuery);
</script>

Step 3.

Since certain browser policies prevent autoplaying some media like audio unless the user has interacted with the page first (for example clicked somewhere on the page), the hover effect won't work until you click somewhere (anywhere) on the page. 

To get around this issue, you can activate the promotional pop up that comes up when you enter the site. I couldn't figure out any other solution around this, so this was the best I could do. I'm planning on just having a fun pop up that displays a quote or something, and customize the design so it feels intentional.

(Can be found under Pages > Utilities > Promotional Pop Up.)

If you want to make the pop up appear every single time someone visits the page (not just once per day), to ensure the audio hover effect always works right away, you can add the following script in the Header of your Code Injection as well:

<script>
  window.localStorage.setItem('test', '0');
  window.localStorage.setItem('squarespace-popup-overlay', '0');
</script>

Hope this helps someone!