Web Audio API お勉強 その２

g200kgさんのサイトにオーディオ波形を表示するサンプルコードがありましたので、お勉強させていただきます。

Web Audio API 解説 - 12.アナライザーの使い方 | g200kg Music & Software

初期値

グラフ描画を周波数領域or時間領域のどちらですかのフラグ(mode)とソースを定義.　　 とりあえずここは流します.

// initial condition 
var mode = 0;
var src = null;

アナライザーの設定

きました。アナライザ。これがないとつまらない。
AudioContexのcreateAnalyser()メソッドを使って, アナライザオブジェクトを生成しています。
そして, デシベル範囲の初期値を 描画しているのが分かります。

// analyser
var analyser = audioctx.createAnalyser();
analyser.fftSize = 1024;
document.getElementById("min").value = analyser.minDecibels;
document.getElementById("max").value = analyser.maxDecibels;

キャンバスの設定

きました。キャンバス。これがないとつまらない。
キャンバスは初めてなので, 良くわからない.

なにやら、gradbaseとgradlineの二つの変数がある。
どちらもcreateLinearGradient()から生成されている。 引数で表される座標から得られる直線に沿って描く線形グラデーションを表す CanvasGradient オブジェクト

どうやらどちらも同じオブジェクトなので, UIで見た紫とオレンジのグラフのことかな。

// canvas前半
var ctx = document.getElementById("graph").getContext("2d");
var gradbase = ctx.createLinearGradient(0, 0, 0, 256);
gradbase.addColorStop(0, "rgb(20,22,20)");
gradbase.addColorStop(1, "rgb(20,20,200)");

// canvas後半
var gradline = [];
for(var i = 0; i < 256; ++i) {
    gradline[i] = ctx.createLinearGradient(0, 256 - i, 0, 256);
    var n = (i & 64) * 2;
    gradline[i].addColorStop(0, "rgb(255,0,0)");
    gradline[i].addColorStop(1, "rgb(255," + i + ",0)");
}