<!doctype html>
<html>
  <head>
    <title>Test onended with Different Playback Rates</title>
    <style type="text/css">
      header {
        margin: 20px 0;
      }
      #results {
        white-space: pre;
        font-family: monospace;
      }
    </style>
  </head>

  <body>
    <h1>Test onended with Different Playback Rates</h1>

    <p>
      Run the following tests in order.  In all cases the onended event should be fired.

      See <a href="crbug.com/484935">crbug.com/484935</a>.
    </p>
    <ol>
      <li>
        Press "Rate 1" button to test onended with a playback rate of 1. You should hear a sound and
        the onended event should be fired, which should print a message to the console and the
        Result are below.  This audio is the reference.
        <p>
          The onended event should occur after about <span id="rate-1-duration"></span> sec.
        </p>
      </li>
      <li>
        Press "Rate 2" button to do the same test but with the playback rate set to 2. This should
        sound somewhat like 1, but have a higher pitch and finish sooner.
        <p>
          The onended event should occur after about <span id="rate-2-duration"></span> sec.
        </p>
      </li>
      <li>
        Press "Rate 1/2" button to do the same test but with the playback rate set to 1/2. This
        should sound like 1, but last twice as long with a lower pitch.  The entire audio sample
        should be played. (Compare with Rate 1.)

        <p>
          The onended event should occur after about <span id="rate-half-duration"></span> sec.
        </p>
      </li>
      <li>
        Press "Rate variable" button to test playback with a variable playback rate.  The entire
        sample should be played.  Make sure this is distantly different from the other rates
        above. If not, then playback automation did not work and a new bug should be filed.

        <p>
          The onended event should occur after approximately <span
          id="rate-var-min-duration"></span> sec, but may take longer.
        </p>
      </li>
    </ol>
    <button id="rate-1" disabled onclick="test1()">Rate 1</button>
    <button id="rate-2" disabled onclick="test2()">Rate 2</button>
    <button id="rate-half" disabled onclick="testHalf()">Rate 1/2</button>
    <button id="rate-var" disabled onclick="testVariable()">Rate variable</button>

    <header>Results</header>
    <div id="results"></div>

    <script>
      var context = new AudioContext();
      var src;
      var buffer;
      // Duration (in sec) of the sine source to be used as the test signal.
      var duration = 1;

      function generateTestSignal () {
        // Create a new test signal.  A tone of nominal length |duration|.  Near the end, we
        // increase the amplitude and then finally fade out the signal.  We do this so that we can
        // hear when the tone should be ending in case a test fails and the output is clipped
        // permaturely.

        // Time from the nominal end where we increase the amplitude
        var changeTime = 0.2;
        // How fast to fade out the signal.
        var timeConstant = 0.2;

        // Create an offline context long enough to hold the nominal tone plus the fade out.
        // Somewhat arbitrarily use 5 time constants as the duration of the fade.  The signal should
        // be small enough that there's not large glitch at the end, but short enough that we don't
        // have a long silence at the end.
        var contextDuration = duration + timeConstant * 5;
        var offline = new OfflineAudioContext(1, contextDuration * context.sampleRate, context.sampleRate);

        var osc = offline.createOscillator();
        var gain = offline.createGain();

        osc.connect(gain);
        gain.connect(offline.destination);

        // Start the tone at amplitude 0.75.
        gain.gain.setValueAtTime(.75, 0);
        // Gradually increase the gain to 1, a little before the nominal end of the tone.
        gain.gain.setTargetAtTime(1, duration - changeTime, timeConstant);
        // Now fade out the signal.
        gain.gain.setTargetAtTime(0, duration, timeConstant);
        osc.start();

        offline.startRendering().then(function (b) {
          buffer = context.createBuffer(1, b.length, context.sampleRate);
          buffer.copyToChannel(b.getChannelData(0), 0);

          // Inform user how long the done is.
          log("Test signal duration = " + buffer.duration + " sec");

          // Update the text with the actual lengths so we can compare the expected onended time and
          // the actual.
          document.getElementById("rate-1-duration").textContent = contextDuration;
          document.getElementById("rate-2-duration").textContent = contextDuration / 2;
          document.getElementById("rate-half-duration").textContent = contextDuration / 0.5;

          // The factor 1.13 is an approximation of where the onended event should occur. This was
          // determined by experimentation because it's pretty hard to calculate the actual duration
          // when we automate the playback rate in complicated ways.
          document.getElementById("rate-var-min-duration").textContent = 1.13 * contextDuration;

          // Signal generated so we can enable the buttons now.
          enableButtons();
        });
      }

      function enableButtons () {
        document.getElementById("rate-1").disabled = false;
        document.getElementById("rate-2").disabled = false;
        document.getElementById("rate-half").disabled = false;
        document.getElementById("rate-var").disabled = false;
      }

      window.onload = generateTestSignal;

      function createGraph(rate) {
        // Create a simple graph with the source connected to the destination and set up the
        // playback rate according to |rate|.

        src = context.createBufferSource();
        src.buffer = buffer;
        src.playbackRate.value = rate;
        src.connect(context.destination);
      }

      function test1() {
        // Rate 1 test.
        createGraph(1);
        var startTime = context.currentTime;
        src.onended = function () {
          log("Rate 1 test ended at " + (context.currentTime - startTime) + " sec");
        }
        src.start();
      }

      function test2() {
        // Rate 2 test
        createGraph(2);
        var startTime = context.currentTime;
        src.onended = function () {
          log("Rate 2 test ended at " + (context.currentTime - startTime) + " sec");
        }
        src.start();
      }

      function testHalf() {
        // Rate 1/2 test
        createGraph(0.5);
        var startTime = context.currentTime;
        src.onended = function () {
          log("Rate 0.5 test ended at " + (context.currentTime - startTime) + " sec");
        }
        src.start();
      }

      function testVariable() {
        // Variable rate test.  Set the nominal playback rate to 0 so that the automation completely
        // determines the playback rate. (Otherwise it gets added to the intrinsic playback rate.)
        createGraph(0);

        // Create a constant buffer of value 1 that we will automate to generate the desired
        // playback rate.

        var gainSrc = context.createBufferSource();
        var gainSrcBuffer = context.createBuffer(1, 1, context.sampleRate);
        var d = gainSrcBuffer.getChannelData(0);
        d[0] = 1;
        gainSrc.buffer = gainSrcBuffer;
        gainSrc.loop = true;

        // Automate this gain node to produce the desired playback rate.  What we want is to start
        // the playback rate at 2, exponentially ramp down to 0.1 at |duration|/2.  Then linear ramp
        // back up to 1.  This will cause the output signal to change pitch and duration.  The exact
        // modulation is not important except that we want the minimum playback rate to be less than
        // 1 to make sure we don't prematurely end the sample causing the onended event not to be
        // fired.
        var playback = context.createGain();
        playback.gain.setValueAtTime(2, context.currentTime);
        playback.gain.exponentialRampToValueAtTime(0.1, context.currentTime + duration / 2);
        playback.gain.linearRampToValueAtTime(1, context.currentTime + duration);

        gainSrc.connect(playback);
        playback.connect(src.playbackRate);

        gainSrc.start();

        var startTime = context.currentTime;
        src.onended = function () {
          log("Rate variable test ended at " + (context.currentTime - startTime) + " sec");
        }

        src.start();
      }

      function log(message) {
        console.log(message);
        var results = document.getElementById("results");
        results.textContent += message + "\n";
      }
    </script>
  </body>
</html>