<!DOCTYPE html>
<html>
<head>
    <title>Test WebAudio Output Clipping</title>
    <script>
        var context = new AudioContext();
        var gainNode = context.createGain();
        gainNode.connect(context.destination);
        gainNode.gain.value = 100;

        var frequency = 1000;
        var duration = 1;

        function playNormal() {
            // Play a square wave of amplitude 1 (roughly)
            var oscillator = context.createOscillator();
            oscillator.frequency.value = frequency;
            oscillator.type = 'square';
            oscillator.connect(context.destination);
            oscillator.start();
            oscillator.stop(context.currentTime + duration);
        }
        
        function playLoud() {
            // Play a large amplitude sine wave.
            var oscillator = context.createOscillator();
            oscillator.frequency.value = frequency;
            oscillator.type = 'sine';
            oscillator.connect(gainNode);
            oscillator.start();
            oscillator.stop(context.currentTime + duration);
        }

        function setText() {
            // Set the text correctly with the actual sine amplitude.
            document.getElementById("amplitude").textContent = gainNode.gain.value;
        }

        window.onload = setText;
    </script>
</head>
<body>
    <p>
      This tests that output audio is clamped to 0db maximum.  Press each button below in turn.  The
      apparent volume for both should be about equal, even though the second button plays with much
      higher gain than the first. The resulting waveforms are not equal, however, as the second
      button audio is clipped to a square wave shape.
    </p>
    <p>
      The first button plays a square wave with nominal amplitude of 1.  That actual amplitude is
      slightly less than this because the square wave is band-limited which causes ringing, so the
      amplitude is reduced slightly to prevent overflows due to the ringing.
    </p>
    <p>
      The second button plays a very loud sine wave of amplitude <span id="amplitude"></span>.  This
      is clipped to unit amplitude so it is approximately equal to a square wave.  There will be
      some buzzing due to the clipping.
    </p>
    <p>
      <strong>WARNING</strong>: Full amplitude signals may be loud.
    </p>
    <button onclick="playNormal()" title="Normal square wave with nominal amplitude of 1">
      Normal square wave
    </button>
    <button onclick="playLoud()" title="Loud sine wave that will be clipped to a square wave">
      Loud sine wave (clipped)
    </button>
</body>
</html>