The getOutputTimestamp()
method of the AudioContext
interface returns a new AudioTimestamp
object containing two audio timestamp values relating to the current audio context.
The two values are as follows:
-
AudioTimestamp.contextTime
: The time of the sample frame currently being rendered by the audio output device (i.e., output audio stream position), in the same units and origin as the context's AudioContext.currentTime
. Basically, this is the time after the audio context was first created. -
AudioTimestamp.performanceTime
: An estimation of the moment when the sample frame corresponding to the stored contextTime
value was rendered by the audio output device, in the same units and origin as performance.now()
. This is the time after the document containing the audio context was first rendered.
An AudioTimestamp
object, which has the following properties.
-
contextTime
: A point in the time coordinate system of the currentTime
for the BaseAudioContext
; the time after the audio context was first created. -
performanceTime
: A point in the time coordinate system of a Performance
interface; the time after the document containing the audio context was first rendered
In the following code we start to play an audio file after a play button is clicked, and start off a requestAnimationFrame
loop running, which constantly outputs the contextTime
and performanceTime
.
You can see full code of this example at output-timestamp (see it live also).
playBtn.addEventListener("click", () => {
if (!audioCtx) {
audioCtx = new AudioContext();
}
source = new AudioBufferSourceNode(audioCtx);
getData();
source.start(0);
playBtn.disabled = true;
stopBtn.disabled = false;
rAF = requestAnimationFrame(outputTimestamps);
});
stopBtn.addEventListener("click", () => {
source.stop(0);
playBtn.disabled = false;
stopBtn.disabled = true;
cancelAnimationFrame(rAF);
});
function outputTimestamps() {
const ts = audioCtx.getOutputTimestamp();
output.textContent = `Context time: ${ts.contextTime} | Performance time: ${ts.performanceTime}`;
rAF = requestAnimationFrame(outputTimestamps);
}