chromium/src/third_party/blink/manual_tests/webaudio/audiobuffersource-playbackrate-onended.html - manifest_repos/chromium_src - Git at Google

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