AudioParam: setTargetAtTime() メソッド

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.

setTargetAtTime()AudioParam インターフェイスのメソッドで、 AudioParam の値を徐々に変化させる開始をスケジュールします。これは ADSR エンベロープのディケイやリリース部分に使用します。

構文

js
setTargetAtTime(target, startTime, timeConstant)

引数

target

指定された開始時刻に引数が変化し始める値。

startTime

指数変化の開始時刻。 AudioContext.currentTime と同じ時間座標系で指定します。これが AudioContext.currentTime 以下の場合、引数はすぐに変化を始めます。

timeConstant

秒単位で指定された、指数関数的に対象とする手法に移行する際の時刻定数値。この値が大きいほど、遷移は遅くなります。

返値

この AudioParam オブジェクトへの参照です。このインターフェイスの古いブラウザーの実装の中には undefined を返すものもあります。

解説

変化は startTime で指定した時刻から始まり、指数関数的に target 引数で指定された値に向かって移動します。 timeConstant 引数で定義されているディケイレートは指数関数的です。 したがって、値が完全に target に到達することはありませんが、長さ timeConstant の各タイムステップの後、値は別の式 1 - e - 1 63.2 % 1 - e^{-1} \approx 63.2% target に近づきます。完全な式(一次線形連続時不変システムを使用しています)については、ウェブオーディオ API 仕様書を調べてください。

どうしても特定の時刻までに目標値に到達する必要がある場合は、 AudioParam.exponentialRampToValueAtTime() を使用することができます。ただし、数学的な理由から、このメソッドは現在値や対象とする値が 0 の場合には動作しません。

良い timeConstant の選択

前述のように、この値は指数関数的に変化し、 timeConstant ごとに 63.2% ずつ対象とする値に向かって変化します。目標値に達することを心配する必要はありません。十分に近づけば、それ以上の変化は人間のリスナーには知覚できないでしょう。

使用する用途によっては、対象とする値の 95% になれば十分かもしれません。その場合は、 timeConstant を対象とする時間の 3 分の 1 に設定すればよいでしょう。

詳細については、時間の経過とともに値が 0% から 100% までどのように変化するか、以下の表で調べてください。

startTime からの時間
0 * timeConstant 0%
0.5 * timeConstant 39.3%
1 * timeConstant 63.2%
2 * timeConstant 86.5%
3 * timeConstant 95.0%
4 * timeConstant 98.2%
5 * timeConstant 99.3%
n * timeConstant 1

1 - e - n 1 - e^{-n}

この例では、 2 つの制御ボタンを持つメディアソースがあります(ソースコードは audio-param repo を参照するか、またはこの例をライブで見てください)。これらのボタンが押されると、 setTargetAtTime() が使用され、それぞれゲイン値を 1.0 まで、 0 までフェードアップさせます。

js
// 音声コンテキストの作成
const audioCtx = new AudioContext();

// 例のための基本的な値を設定
const myAudio = document.querySelector("audio");

const atTimePlus = document.querySelector(".at-time-plus");
const atTimeMinus = document.querySelector(".at-time-minus");

// MediaElementAudioSourceNode を作成
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成し、ゲイン値を 0.5 に設定
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5;
let currGain = gainNode.gain.value;

// AudioBufferSourceNode を gainNodeに、
// gainNode を出力先に接続
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// onclick で何かするようにボタンを設定
atTimePlus.onclick = () => {
  currGain = 1.0;
  gainNode.gain.setTargetAtTime(1.0, audioCtx.currentTime + 1, 0.5);
};

atTimeMinus.onclick = () => {
  currGain = 0;
  gainNode.gain.setTargetAtTime(0, audioCtx.currentTime + 1, 0.5);
};

仕様書

Specification
Web Audio API
# dom-audioparam-settargetattime

ブラウザーの互換性

BCD tables only load in the browser

関連情報