AudioContext: phương thức getOutputTimestamp()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Phương thức getOutputTimestamp() của giao diện AudioContext trả về một đối tượng AudioTimestamp mới chứa hai giá trị dấu thời gian âm thanh liên quan đến ngữ cảnh âm thanh hiện tại.

Hai giá trị đó là:

AudioTimestamp.contextTime: Thời gian của frame mẫu hiện đang được thiết bị đầu ra âm thanh render (tức vị trí luồng âm thanh đầu ra), theo cùng đơn vị và cùng gốc thời gian với AudioContext.currentTime của ngữ cảnh. Về cơ bản, đây là thời gian tính từ khi audio context được tạo lần đầu.
AudioTimestamp.performanceTime: Giá trị ước tính của thời điểm frame mẫu tương ứng với giá trị contextTime được lưu đã được render bởi thiết bị đầu ra âm thanh, theo cùng đơn vị và cùng gốc thời gian với performance.now(). Đây là thời gian tính từ khi tài liệu chứa audio context được render lần đầu.

Cú pháp

getOutputTimestamp()

Giá trị trả về

Một đối tượng AudioTimestamp, có các thuộc tính sau.

contextTime: Một thời điểm trong hệ tọa độ thời gian của currentTime đối với BaseAudioContext; tức là thời gian sau khi audio context được tạo lần đầu.
performanceTime: Một thời điểm trong hệ tọa độ thời gian của giao diện Performance; tức là thời gian sau khi tài liệu chứa audio context được render lần đầu.

Trong đoạn mã sau, chúng ta bắt đầu phát một tệp âm thanh sau khi người dùng nhấn nút phát, và đồng thời khởi động một vòng lặp requestAnimationFrame liên tục xuất contextTime và performanceTime.

Bạn có thể xem toàn bộ mã của ví dụ tại output-timestamp (xem trực tiếp).

// Press the play button
playBtn.addEventListener("click", () => {
  // We can create the audioCtx as there has been some user action
  audioCtx ??= new AudioContext();
  source = new AudioBufferSourceNode(audioCtx);
  getData();
  source.start(0);
  playBtn.disabled = true;
  stopBtn.disabled = false;
  rAF = requestAnimationFrame(outputTimestamps);
});

// Press the stop button
stopBtn.addEventListener("click", () => {
  source.stop(0);
  playBtn.disabled = false;
  stopBtn.disabled = true;
  cancelAnimationFrame(rAF);
});

// Helper function to output timestamps
function outputTimestamps() {
  const ts = audioCtx.getOutputTimestamp();
  output.textContent = `Context time: ${ts.contextTime} | Performance time: ${ts.performanceTime}`;
  rAF = requestAnimationFrame(outputTimestamps); // Reregister itself
}