JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <script>
  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  var gainNode = audioCtx.createGain();  
  gainNode.connect(audioCtx.destination);
  var gain = 0.1;
  //---------------------------------------------------------------------
  gainNode.gain.setValueAtTime(gain, audioCtx.currentTime);
</script>
</head>
<!-- ===================================================================== -->
<body>

  <div>
    <button onclick="myFunction()">
      Click me
    </button>
  </div>
  <script>
  function myFunction()
  {  
    //---------------------------------------------------------------------      
    var duration = 0.5; // in seconds
    //---------------------------------------------------------------------
    var oscillator = audioCtx.createOscillator();
    oscillator.type = 'square';
    oscillator.frequency.value = 500;
    oscillator.connect(gainNode);
    oscillator.start(audioCtx.currentTime);
    oscillator.stop(audioCtx.currentTime + duration);
    //---------------------------------------------------------------------
  }
  </script>
</body>
<!-- ===================================================================== -->
</html>