このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
AudioContext: getOutputTimestamp() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年4月以降、すべてのブラウザーで利用可能です。
getOutputTimestamp() は AudioContext インターフェイスのメソッドで、現在の音声コンテキストに関係する 2 つの音声タイムスタンプが格納された新しい AudioTimestamp オブジェクトを返します。
2 つの値とは、以下のものです。
AudioTimestamp.contextTime: コンテキストのAudioContext.currentTimeで用いられるのと同じ単位と始点の、現在音声出力デバイスで出力されているサンプルフレームの時刻(すなわち、出力音声ストリームの位置)です。 基本的には、これは音声コンテキストが最初に作られてからの時間です。AudioTimestamp.performanceTime:performance.now()で用いられるのと同じ単位と始点の、contextTimeの値に対応するサンプルフレームが音声出力デバイスで出力される時刻の推定値です。これは、音声コンテキストを含む文章が最初に描画されてからの時間です。
構文
js
getOutputTimestamp()
引数
なし
返値
AudioTimestamp オブジェクトです。このオブジェクトは以下のプロパティを持ちます。
contextTime:BaseAudioContextのcurrentTimeで用いられる時間座標系上の点で、音声コンテキストが最初に作られてからの時間です。performanceTime:Performanceインターフェイスで用いられる時間座標系上の点で、音声コンテキストを含む文章が最初に描画されてからの時間です。
例
以下のコードでは、play ボタンが押されると音声ファイルの再生を開始し、requestAnimationFrame によるループを開始します。このループでは、継続して contextTime と performanceTime を出力します。
この例のコード全体は output-timestamp で見ることができます。(動く例を見る)
js
// play ボタンを押す
playBtn.addEventListener("click", () => {
// ユーザーの操作があったので、audioCtx を作ることができる
if (!audioCtx) {
audioCtx = new AudioContext();
}
source = new AudioBufferSourceNode(audioCtx);
getData();
source.start(0);
playBtn.disabled = true;
stopBtn.disabled = false;
rAF = requestAnimationFrame(outputTimestamps);
});
// stop ボタンを押す
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); // 自身を再登録する
}
仕様書
| 仕様書 |
|---|
| Web Audio API # dom-audiocontext-getoutputtimestamp |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。