From 8f17fc8d536384b9733a839db393eea38ec7974f Mon Sep 17 00:00:00 2001 From: Tomohiro IKEDA Date: Fri, 22 Dec 2023 18:00:02 +0900 Subject: [PATCH] feat: AudioParam --- docs/index.html | 119 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) diff --git a/docs/index.html b/docs/index.html index cfeb213..002b681 100644 --- a/docs/index.html +++ b/docs/index.html @@ -397,6 +397,125 @@

connect メソッド (AudioNode の接続)

これで, とりあえず, ブラウザ (Web) で音を鳴らすことができました !

+
+

AudioParam

+

+ サウンドの入力点と出力点を生成して, それらを接続するだけでは, 元の入力音をそのまま出力するだけなので高度なオーディオ処理はできません. むしろ, Web + Audio API において重要なのは, この入力と出力の間に, 音響変化をさせる AudioNode を接続することです. 音響変化をさせるためには, + 音響変化のためのパラメータを取得・設定したり, 周期的に変化させたり (LFO) できる必要があります. Web Audio API において, その役割を担うのが + AudioParam クラスです. AudioNode が現実世界の音響機器と例えをしましたが, それに従うと, + AudioParam クラスはノブやスライダーなど音響機器のパラメータを設定するコントローラーのようなものです. +

+

+ AudioParam クラスは直接インスタンス化することはありません. AudioNode のプロパティとして, + AudioNode のサブクラスのインスタンスを生成した時点でインスタンス化されているのでプロパティアクセスで参照することが可能です. +

+

+ AudioParam では, 単純なパラメータの取得や設定だけでなく, そのパラメータを周期的に変化させたり (LFO), スケジューリングによって変化させる + (エンベロープジェネレーターなど) ことが可能です (ここはオーナーの経験からですが, Web Audio API で高度なオーディオ処理を実装するためには, + AudioParam を理解して音響パラメータを制御できるようになるかが非常に重要になっていると思います). +

+
+

GainNode

+

+ AudioParam の詳細は, のちほどのセクションで解説しますので, このセクションでは, 最初のステップとして, + GainNode を使って, パラメータの取得・設定を実装します. GainNode はその命名のとおり, + ゲイン (増幅率), つまり, 入力に対する出力の比率 (入力を 1 としたときに出力の値) を制御するための + AudioNode で, Web Audio API におけるオーディオ処理で頻繁に使うことになります. このセクションでは, 単純に, GainNode の + gain プロパティ (AudioParam インスタンス) を参照して, そのパラメータを取得・設定してみます (このセクションでは, + 音量の制御と考えても問題ありません). +

+

+ GainNode も AudioNode のサブクラスなので, コンストラクタ呼び出し, または, ファクトリメソッドで + GainNode インスタンスを生成できます. +

+ 
const context = new AudioContext();
+
+const gain = new GainNode(context);
+

コンストラクタ呼び出しで生成する場合, 初期パラメータ (GainOptions) を指定することも可能です.

+ 
const context = new AudioContext();
+
+// `gain` のデフォルト値が `1.0` なので `0.5` に変更してインスタンス生成
+const gain = new GainNode(context, { gain: 0.5 });
+

ファクトリメソッドで生成する場合.

+ 
const context = new AudioContext();
+
+const gain = context.createGain();
+

GainNode インスタンスを生成したら, OscillatorNode と AudioDestinationNode の間に接続します.

+ 
const context = new AudioContext();
+
+const oscillator = new OscillatorNode(context);
+const gain       = new GainNode(context, { gain: 0.5 });
+
+// OscillatorNode (Input) -> GainNode -> AudioDestinationNode (Output)
+oscillator.connect(gain);
+gain.connect(context.destination);
+
+// Start immediately
+oscillator.start(0);
+
+// Stop after 2.5 sec
+oscillator.stop(context.currentTime + 2.5);
+
+

これで実際にサウンドを発生させると, 音の大きさが小さく聴こえるはずです.

+

+ このコードだと, 初期値を変更しているだけなので, 例えば, ユーザー操作によって変更するといったことができないので, + インスタンス生成時以外でパラメータを設定したり, 取得したりする場合は, GainNode の gain プロパティを参照します. これは, + 先ほども記載したように, AudioParam インスタンスです. パラメータの取得や設定をするには, その + value プロパティにアクセスします. +

+

簡単な UI として, 以下の HTML があるとします.

+ 
<label for="range-gain">gain</label>
+<input type="range" id="range-gain" value="1" min="0" max="1" step="0.05" />
+<span id="print-gain-value">1</span>
+

+ この input[type="range"] のイベントリスナーで, input[type="range"] で入力された値 (JavaScript の + number 型) を gain (AudioParam インスタンス) の value プロパティに設定し, また, + その値を取得して, HTML に動的に表示します. +

+ 
const context = new AudioContext();
+
+const oscillator = new OscillatorNode(context);
+const gain       = new GainNode(context);
+
+// OscillatorNode (Input) -> GainNode -> AudioDestinationNode (Output)
+oscillator.connect(gain);
+gain.connect(context.destination);
+
+// Start immediately
+oscillator.start(0);
+
+const spanElement = document.getElementById('print-gain-value');
+
+document.getElementById('range-gain').addEventListener('input', (event) => {
+  gain.value = event.currentTarget.valueAsNumber;
+
+  spanElement.textContent = gain.value;
+});
+

+ AudioParam のパラメータの取得や設定は, このように, JavaScript のオブジェクトに対するプロパティの getter や setter + と同じなので特に違和感なく理解できるのではないでしょうか. +

+
+