JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <script>
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
var gainNode = audioCtx.createGain();
var gain = 0.1;
gainNode.gain.setValueAtTime(gain, audioCtx.currentTime);
//---------------------------------------------------------------------
var pan = 1; // This should be in range [-1, 1]

if (audioCtx.createStereoPanner)
{
  var panner = audioCtx.createPanner();
  panner.pan.value = pan;
}
else
{
  var panner = audioCtx.createPanner();
  panner.panningModel = 'equalpower';
  panner.setPosition(pan, 0, 1 - Math.abs(pan));
}

gainNode.connect(panner);
panner.connect(audioCtx.destination);
    </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.connect(panner);
  oscillator.start(audioCtx.currentTime);
  oscillator.stop(audioCtx.currentTime + duration);
  //---------------------------------------------------------------------
}
    </script>
  </body>
  <!-- ===================================================================== -->

</html>