third_party/WebKit/ManualTests/webaudio/audiooutputtimestamp.html - Issue 2060833002: Implementation of 'AudioContext.getOutputTimestamp' method

Side by Side Diff: third_party/WebKit/ManualTests/webaudio/audiooutputtimestamp.html

Issue 2060833002: Implementation of 'AudioContext.getOutputTimestamp' method (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: rebased Created 4 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/webexposed/global-interface-listing-expected.txt ('k') | third_party/WebKit/Source/modules/modules_idl_files.gni » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!doctype html>

	2 <html>

	3 <head>

	4 <title>Test AudioContext.getOutputTimestamp() method</title>

	5 <style type="text/css">

	6 body {

	7 margin: 2em;

	8 }

	9 .manual-test-ui {

	10 font-family: Arial;

	11 padding: 1em;

	12 border: 1px solid #999;

	13 }

	14 .manual-test-ui button {

	15 padding: 1em;

	16 font-size: 1em;

	17 }

	18 .manual-test-ui div {

	19 padding: 10px;

	20 font-size: 1.5em;

	21 }

	22 .manual-test-ui-beep-indicator {

	23 padding: 10px;

	24 display: inline-block;

	25 border-radius: 50%;

	26 width: 10px;

	27 height: 10px;

	28 background: gray;

	29 }

	30 </style>

	31 </head>

	32

	33 <body>

	34 <h1>Test AudioContext.getOutputTimestamp() method</h1>

	35

	36 <p>Tests the values returned from AudioContext.getOutputTimestamp()</p>

	37

	38 <p>Press "Start testing" to run the test. You should hear a sine tone (beepi ng) in 2 seconds.

	39 During the delay the color of "beeping indicator" is red.</p>

	40

	41 <p>The color of "beeping indicator" is yellow when 'context.currentTime' is at beeping

	42 interval but the estimated output position is not there yet and thus beep ing is not audible.</p>

	43

	44 <p><b>Note: </b> the "beeping indicator" might never be seen yellow if the t est is run in the

	45 environment with low latency audio (i.e. if the output latency is smaller than frame update

	46 period).</p>

	47

	48 <p>The color of "beeping indicator" is green when the estimated output posit ion is at beeping

	49 interval, this should happen exactly when beeping is audible.</p>

	50

	51 <p>Press "Refresh values" to fetch the fresh output audio timestamp values

	52 and compare them to 'AudioContext.currentTime' and 'Performance.now()'. </ p>

	53

	54 <p>When context is running the obtained audio timestamp and performance time stamp values must be always

	55 slightly behind of 'AudioContext.currentTime' and 'Performance.now()' cor respondingly.</p>

	56

	57 <p>Please see <a href="https://webaudio.github.io/web-audio-api/#audiotimest amp">Web Audio

	58 API</a> for more details.</p>

	59

	60 <div class="manual-test-ui">

	61 <div id="audioTime"></div>

	62 <div id="performanceTime"></div>

	63 <div id="timestampContextTime"></div>

	64 <div id="timestampPerformanceTime"></div>

	65 <div class="manual-test-ui-beep-indicator" id="beepIndicator"></div>

	66

	67 <button id="startButton" onclick="startTesting()">Start testing</button>

	68 <button id="valuesButton" onclick="refreshValues()">Refresh values</button >

	69 <button onclick="context.suspend()">Suspend context</button>

	70 <button onclick="context.resume()">Resume context</button>

	71 </div>

	72

	73 <script type="text/javascript">

	74 var context = new AudioContext();

	75

	76 refreshValues();

	77

	78 let startBeepingTime;

	79 let endBeepingTime;

	80 let indicator = document.querySelector('#beepIndicator');

	81

	82 function inBeepingInterval(audioPosition) {

	83 return audioPosition >= startBeepingTime && audioPosition <= endBeepingT ime;

	84 }

	85

	86 function checkAudioOutputPosition() {

	87 if (!document.querySelector('#startButton').disabled)

	88 return;

	89 window.requestAnimationFrame(checkAudioOutputPosition);

	90

	91 if (context.state == "suspended") {

	92 indicator.style.background = "green";

	93 return;

	94 }

	95

	96 let timestamp = context.getOutputTimestamp();

	97 let audioOutputPosition = (performance.now() - timestamp.performanceTime ) * 0.001 + timestamp.contextTime;

	98

	99 if (inBeepingInterval(audioOutputPosition))

	100 indicator.style.background = "green";

	101 else if (inBeepingInterval(context.currentTime))

	102 indicator.style.background = "yellow";

	103 }

	104

	105 function startTesting() {

	106 document.querySelector('#startButton').disabled = true;

	107 let oscillator = context.createOscillator();

	108 oscillator.connect(context.destination);

	109 startBeepingTime = context.currentTime + 2.0;

	110 endBeepingTime = startBeepingTime + 3.0;

	111

	112 oscillator.start(startBeepingTime);

	113 oscillator.stop(endBeepingTime);

	114 indicator.style.background = "red";

	115 window.requestAnimationFrame(checkAudioOutputPosition);

	116

	117 oscillator.onended = () => {

	118 document.querySelector('#startButton').disabled = false;

	119 indicator.style.background = "gray";

	120 }

	121 }

	122

	123 function refreshValues() {

	124 document.querySelector("#audioTime").innerHTML = "context.currentTime: " + context.currentTime;

	125 document.querySelector("#performanceTime").innerHTML = "performance.now( ): " + performance.now();

	126

	127 let timestamp = context.getOutputTimestamp();

	128 document.querySelector("#timestampContextTime").innerHTML = "timestamp a udio: " + timestamp.contextTime;

	129 document.querySelector("#timestampPerformanceTime").innerHTML = "timesta mp performance: " + timestamp.performanceTime;

	130 }

	131 </script>

	132 </body>

	133 </html>

OLD	NEW