Add a Button that plays a Sound

To add a button that plays a Sound in Squarespace, you can follow these.

#1. First, use the Squarespace ID Finder tool to find the ID of the Button

In my example we will have:

  • #block-yui_3_17_2_1_1719049347948_6407

#2. Use this code to Page Header Code Injection (the page where you use Button)

Replace the ID in the code with your button block ID.

<audio id="player" src="https://www.madisonrowe.com/s/bossa-baden.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_1719049347948_6407").click(function() {
    if (playing == false) {
      document.getElementById("player").play();
      playing = true;
    } else {
      document.getElementById("player").pause();
      playing = false;
    }
  });
});
</script>

#3. Replace the Audio URL in the code with your audio URL.