Sound Effect on a button click

Can someone help me (I've been a web designer with SS for over two years, this is my first audio request):

Please help -- I've been trying to figure this out all week with no luck.

 **How can I have an audio file play when a button is clicked?

I want to use an audio file (I already have the /s/ audio file loaded on my page) when anyone clicks a button on the website. What code should I add? Do I only need CSS, or will I need code injections, or embedded block?

I've tried using the embed block with this code--the button works, but the sound does not. Is my code wrong or do I need to try a different method to get the sound file to play on a button click?

<audio id="myAudio">
  <source src="/s/Pickleball-Hit-2.mp3" type="audio/mpeg">
</audio>
<!-- link button -->
<center> <a href="/contact"><button onclick="playAudio(/s/Pickleball-Hit-2.mp3)" type="button">
  CONTACT US</button></a></center>
  
  <style>
  button {
  padding 21px 34px;
  font-family: "Sofia Pro" Sofia, Pro, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 2.6em;
  font-family: "Sofia Pro" Sofia, Pro, sans-serif;
  font-style: normal;
  text-transofrm: uppercase;
  color: #ffffff;
  background-color: #19d826;
  border-color: #fff;
  }
  </style>

website: https://slicepb.squarespace.com

pass: pb

Try this as a start for uploading and more:

@Ziggy, @paul2009, or @tuanphan -- can any of you provide insight on what I'm doing wrong with my code to get my audio file to play on a button click? See my original message above for my situation and the code that I'm using. I would really appreciate any guidance you can provide. Thanks!

Which section did you add this code?

I added the code to the home page button (in the first section under the the logo--see pic).

I want all button clicks to trigger it (if there is code to address all button clicks), but if that's not doable, I'm okay with changing every button block to an embedded code block (that looks like a button)--similar to the "Contact Us" button under the logo--if it makes the sound work 

@tuanphan I removed the embedded block and replaced it with the standard button block.  I found code that you uploaded on elfsight (see below). I added it to the page header and updated the blockID. This is the first time that the sound actually worked on a button click -- BUT the button function stopped working (directing to the button's page link of /contact). What can I add to this code to make the button function work again (taking the visitor to the Contact Page AND keep the sound working).

Here is the code:

<audio id="player" src="/s/PickleballHit2.mp3"> </audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
  var playing = false;
  jQuery("#block-yui_3_17_2_1_1724704962175_6435").click(function() {
    if (playing == false) {
      document.getElementById("player").play();
      playing = true;
    } else {
      document.getElementById("player").pause();
      playing = false;
    }
  });
});
</script>

@DesignerLeo Thank you so much for trying to help! I added this to the header, and it sounds better than the code I mentioned earlier (again, thank you!!).

For anyone else trying to do this -- I realized that when I try to click the button in editor mode, the sound will not play when the button has a link attached to it. However, if I go into incognito mode and try the button, the sound AND the button function correctly! 

Leo, thank you so much for helping me solve a two-week-long nightmare lol