[ Jpn | Eng ]

Main Menu



Recent

最近の記事

Search

サイト内検索:

Archive

Powered by
MTOS 5.2.2


g200kg > Web Audio API 解説 > 07.パラメータとオートメーション

Web Audio API 解説

2016/11/14

07.パラメータとオートメーション



Web Audio APIの各ノードのパラメータには AudioParam というオブジェクトになっているものがあります。AudioParamは単に値を入れるだけではなく、他のノードの出力を受け付ける機能とオートメーション機能が備わっています。

ここではこのオートメーション機能について説明します。下の表はAudioParamが持っているオートメーション機能の一覧です。

setValueAtTime(value, startTime)startTimeになったら値をvalueにする
linearRampToValueAtTime(value, endTime)endTimeにvalueになるように現在値から直線的に変化させる
exponentialRampToValueAtTime(value, endTime)endTimeにvalueになるように現在値から指数的に変化させる
setTargetAtTime(target, startTime, timeConstant)startTimeになったら現在値からtargetに向かって漸近的に変化させる
setValueCurveAtTime(values, startTime, duration)startTimeからdurationの期間、valuesのテーブルに従って変化させる
cancelScheduledValues(startTime)startTime以降のスケジュールをキャンセルする

指定した時間までに動作するものと指定した時間になったら動作を開始するものがありますので注意が必要です。

初期化後やキャンセルの後、現在値が必要な関数をいきなり使用すると思った動作にならないので、まずsetValueAtTimeで現在時刻と想定する現在値を設定した後に呼び出す必要があります。

シンセ的なアプリケーションで使用する場合は漸近的に変化するsetTargetAtTime()が多く使われるのではないかと思いますが、指定時刻に決まった値になるわけではなく、指定時刻から動作を開始して変化の速度はtimeConstantで指定します。timeConstantの値はターゲット値に63%まで近づくまでの時間です。現在値が0でtargetが1の場合なら値が0.63になるまでの秒数を指定します。

このオートメーション機能を利用したエンベロープジェネレータの例を示します (本当はリトリガーした時の挙動などまだ考えないといけない部分は残っています)。後ろ半分はついでにCanvasでグラフを表示しているコードです。


<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>AudioParam Automation</h1>
<br/>
<table>
<tr><td> Attack : </td><td> <input id="atk" type="text" size="10" value="0.3"/> </td><td> linearRampToValueAtTime() </td></tr>
<tr><td> Decay : </td><td> <input id="dcy" type="text" size="10" value="1"/> </td><td> setTargetAtTime() </td></tr>
<tr><td> Sustain : </td><td> <input id="sus" type="text" size="10" value="0.5"/> </td><td></td></tr>
<tr><td> Release : </td><td> <input id="rel" type="text" size="10" value="1"/> </td><td> setTargetAtTime() </td></tr>
</table>
<br/>
<button onclick="KeyOn()"> Key On </button> <button onclick="KeyOff()"> Key Off </button>
<br/>
<canvas id="canvas" width="500" height="200"></canvas>

<script type="text/javascript">

window.AudioContext = window.webkitAudioContext||window.AudioContext;
var audioctx = new AudioContext();

var play = 0;
var osc = audioctx.createOscillator();
var gain = audioctx.createGain();
gain.gain.value = 0;
osc.connect(gain);
gain.connect(audioctx.destination);

function KeyOn() {
	if(play == 0) {
		play = 1;
		osc.start(0);
	}
	x = 0;
	var t0 = audioctx.currentTime;
	var t1 = t0 + parseFloat(document.getElementById("atk").value);
	var d = parseFloat(document.getElementById("dcy").value);
	var s = parseFloat(document.getElementById("sus").value);
	gain.gain.setValueAtTime(0, t0);
	gain.gain.linearRampToValueAtTime(1, t1);
	gain.gain.setTargetAtTime(s, t1, d);
}
function KeyOff() {
	var r = parseFloat(document.getElementById("rel").value);
	var t0 = audioctx.currentTime;
	gain.gain.cancelScheduledValues(t0);
	gain.gain.setValueAtTime(gain.gain.value, t0);
	gain.gain.setTargetAtTime(0, t0, r);
}

var x = 0;
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "#222222";
ctx.fillRect(0, 0, 500, 200);
setInterval(Interval, 50);

function Interval() {
	if(x<500) {
		var y = gain.gain.value;
		ctx.fillStyle = "#222222";
		ctx.fillRect(x, 0, 2, 200);
		ctx.fillStyle = "#00ff00";
		ctx.fillRect(x, 200 - y * 200, 2, y * 200);
	}
	x += 2;
}

</script>
<br/>

</body>
</html>
テストページ:パラメータオートメーション

このテストページは Firefox では仕様の微妙な解釈の違いにより、うまく動作しません。

このパラメータオートメーションは Oscillator/AudioBufferSourceのstart()/stop() と同じくオーディオコンテキストの currentTime ベースでの時間管理になりますので、ちゃんと使えばJavascriptの処理の負荷による影響を受けずにタイミングを作る事ができます。




g200kg