<!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>