Buy me a coffee

Add a Button that plays a Sound

#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

Add A Button That Plays Sound 01 Min#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.

Add A Button That Plays Sound 02 Min

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

Add A Button That Plays Sound 03 Min