Chromium Code Reviews Chromium Code Reviews
Issue 2060833002:
Implementation of 'AudioContext.getOutputTimestamp' method (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| 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 green.</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>The color of "beeping indicator" is red when the estimated output positio n is at beeping | |
| 45 interval, this should happen exactly when beeping is audible.</p> | |
| 46 | |
| 47 <p>Press "Refresh values" to fetch the fresh output audio timestamp values | |
| 48 and compare them to 'AudioContext.currentTime' and 'Performance.now()'. </ p> | |
| 49 | |
| 50 <p>When context is running the obtained audio timestamp and performance time stamp values must be always | |
| 51 slightly behind of 'AudioContext.currentTime' and 'Performance.now()' cor respondingly.</p> | |
| 52 | |
| 53 <p>Please see <a href="https://webaudio.github.io/web-audio-api/#methods-1"> Web Audio | |
|
Raymond Toy
2016/12/13 22:02:30
nit: update the link to point to the timestamp sec
| |
| 54 API</a> for more details.</p> | |
| 55 | |
| 56 <div class="manual-test-ui"> | |
| 57 <div id="audioTime"></div> | |
| 58 <div id="performanceTime"></div> | |
| 59 <div id="timestampContextTime"></div> | |
| 60 <div id="timestampPerformanceTime"></div> | |
| 61 <div class="manual-test-ui-beep-indicator" id="beepIndicator"></div> | |
| 62 | |
| 63 <button id="startButton" onclick="startTesting()">Start testing</button> | |
| 64 <button id="valuesButton" onclick="refreshValues()">Refresh values</button > | |
| 65 <button onclick="context.suspend()">Suspend context</button> | |
| 66 <button onclick="context.resume()">Resume context</button> | |
| 67 </div> | |
| 68 | |
| 69 <script type="text/javascript"> | |
| 70 var context = new AudioContext(); | |
| 71 | |
| 72 refreshValues(); | |
| 73 | |
| 74 let startBeepingTime; | |
| 75 let endBeepingTime; | |
| 76 let indicator = document.querySelector('#beepIndicator'); | |
| 77 | |
| 78 function inBeepingInterval(audioPosition) { | |
| 79 return audioPosition >= startBeepingTime && audioPosition <= endBeepingT ime; | |
| 80 } | |
| 81 | |
| 82 function checkAudioOutputPosition() { | |
| 83 if (!document.querySelector('#startButton').disabled) | |
| 84 return; | |
| 85 window.requestAnimationFrame(checkAudioOutputPosition); | |
| 86 | |
| 87 if (context.state == "suspended") { | |
| 88 indicator.style.background = "green"; | |
| 89 return; | |
| 90 } | |
| 91 | |
| 92 let timestamp = context.getOutputTimestamp(); | |
| 93 let audioOutputPosition = (performance.now() - timestamp.performanceTime ) * 0.001 + timestamp.contextTime; | |
| 94 | |
| 95 if (inBeepingInterval(audioOutputPosition)) | |
| 96 indicator.style.background = "red"; | |
| 97 else if (inBeepingInterval(context.currentTime)) | |
| 98 indicator.style.background = "yellow"; | |
| 99 } | |
| 100 | |
| 101 function startTesting() { | |
| 102 document.querySelector('#startButton').disabled = true; | |
| 103 let oscillator = context.createOscillator(); | |
| 104 oscillator.connect(context.destination); | |
| 105 startBeepingTime = context.currentTime + 2.0; | |
| 106 endBeepingTime = startBeepingTime + 3.0; | |
| 107 | |
| 108 oscillator.start(startBeepingTime); | |
| 109 oscillator.stop(endBeepingTime); | |
| 110 indicator.style.background = "green"; | |
| 111 window.requestAnimationFrame(checkAudioOutputPosition); | |
| 112 | |
| 113 oscillator.onended = () => { | |
| 114 document.querySelector('#startButton').disabled = false; | |
| 115 indicator.style.background = "gray"; | |
| 116 } | |
| 117 } | |
| 118 | |
| 119 function refreshValues() { | |
| 120 document.querySelector("#audioTime").innerHTML = "context.currentTime: " + context.currentTime; | |
| 121 document.querySelector("#performanceTime").innerHTML = "performance.now( ): " + performance.now(); | |
| 122 | |
| 123 let timestamp = context.getOutputTimestamp(); | |
| 124 document.querySelector("#timestampContextTime").innerHTML = "timestamp a udio: " + timestamp.contextTime; | |
| 125 document.querySelector("#timestampPerformanceTime").innerHTML = "timesta mp performance: " + timestamp.performanceTime; | |
| 126 } | |
| 127 </script> | |
| 128 </body> | |
| 129 </html> | |
| OLD | NEW |
