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

  <body>
    <h1>Test AudioBufferSource.onended</h1>

    <p>Tests that the onended event is called.  This test cannot be run in an offline context
    because the onended event is always called. 
    </p>

    <p>Press "Test" button to run the test.  You should hear two tones, each lasting 1/2 second.  If
    you do not, the test failed and onended was not correctly fired to generate the second tone.
    There should also be messages displayed for each tone played.
    </p>

    <button onclick="runTest()">Test</button>

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

    <script>
      // This is a slightly modified version of http://jsfiddle.net/ep4zm233/

      var context = new AudioContext();

      function runTest() {
        log("Starting test");

        // Create two buffers at a sample rate of 8000. We're assuming 8000 is not the actual
        // context sampleRate so that resampling happens during the play back of the buffers.
        var bufferRate = 8000;
        var bufferSeconds = 0.5;
        var bufferFrames = bufferSeconds * bufferRate;

        // The tone buffers at 400Hz and 600 Hz.
        var sin400 = context.createBuffer(1, bufferFrames, bufferRate);
        var sin600 = context.createBuffer(1, bufferFrames, bufferRate);

        var d400 = sin400.getChannelData(0);
        var d600 = sin600.getChannelData(0);

        var omega = 2*Math.PI/bufferRate;

        for (var k = 0; k < bufferFrames; ++k) {
          d400[k] = Math.sin(omega * 400 * k);
          d600[k] = Math.sin(omega * 600 * k);
        }

        var s1 = context.createBufferSource();

        s1.onended = function () {
          // Create a new source using the 600Hz buffer and play it as soon as the onended event for
          // s1 has fired.
          var s2 = context.createBufferSource();
          s2.connect(context.destination);
          s2.buffer = sin600;
          s2.start();
          log("Tone 2");
        }

        // Set up the 400 Hz buffer and play it.
        s1.buffer = sin400;

        s1.connect(context.destination);
        s1.start();
        log("Tone 1");
      }

      function clearResults() {
        var results = document.querySelector("#results");
        results.textContent = "";
      }

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


  </body>
</html>