<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: rgb(255, 255, 255);
}

.row {
  position: absolute;
}

.tile {
  background-color: rgb(190, 195, 255);
  display: contents;
  font-size: x-large;
  font-weight: bold;
  height: max-content;
  width: max-content;
  margin: 8px;
  padding: 8px;
  text-align: center;
  align-content: center;
}
</style>
</head>
<body>

<div class="row">
  <div class="tile">
    <p>
      WebAudio API Test
    </p>
  </div>
</div>

<script>
  function testWebAudioApi() {
    // Settings for the test.
    var source_count = 3;
    var buffer_duration_seconds = 3.0;
    var source_start_delay_seconds = 5.0;
    var sample_rate = 44100.0;

    console.log("WebAudio API Test:");
    console.log(" source_count=" + source_count.toString());
    console.log(" buffer_duration_seconds=" + buffer_duration_seconds.toString());
    console.log(" source_start_delay_seconds=" + source_start_delay_seconds.toString());
    console.log(" sample_rate=" + source_count.toString());

    // Create Float32Array of samples containing sin wave.
    var audio_sample_count = sample_rate * buffer_duration_seconds;
    var audio_array = new Float32Array(audio_sample_count);
    for (var i = 0; i < audio_sample_count; ++i) {
      audio_array[i] = Math.sin(440.0 * 2.0 * Math.PI * i / sample_rate);
    }
    console.log("Created Float32Array of samples containing sin wave");

    // Create audio context.
    var context = new AudioContext();
    console.log("Created AudioContext");

    // Create and initialize contents of audio buffer.
    var audio_buffer =
      context.createBuffer(1, audio_sample_count, sample_rate);
    console.log("Created AudioBuffer");
    audio_buffer.copyToChannel(audio_array, 0);
    console.log("Initialized AudioBuffer contents with Float32Array");

    // Create and initialize |source_count| audio buffer source nodes.
    var source_nodes = new Array(source_count);
    for (var i = 0; i < source_count; ++i)
    {
      source_nodes[i] = context.createBufferSource();
      console.log(
        "source_nodes["+ i.toString() +"]: Created AudioBufferSourceNode");
      source_nodes[i].buffer = audio_buffer;
      source_nodes[i].connect(context.destination);
      console.log(
        "source_nodes["+ i.toString() +"]: Initialized AudioBufferSourceNode");

      // Capture a copy of |i| for delayed calls.
      (function (i) {
        // Delay a call by |i| * |source_start_delay_seconds| seconds.
        setTimeout(
          // The call to delay: A lambda that adds an event listener for the
          // "ended" event and starts |source_nodes[i]|.
          function() {
            source_nodes[i].addEventListener(
              "ended",
              function () {
                console.log(
                  "source_nodes["+ i.toString() +"]: ended event handled");
              });
            source_nodes[i].start(0);
            console.log("source_nodes["+ i.toString() +"]: start called");
          },
          i * source_start_delay_seconds * 1000);
      }) (i);
    }
  };

  // Delay the entire test for a short time to allow |console| to initialize.
  setTimeout(testWebAudioApi, 500);
</script>

</body>
</html>