イコライザーとは, 周波数特性をコントロールすることによって, 好みの音色に設定するためのエフェクトです. デジタルオーディオプレイヤー (iTunes, Windows Media Player…etc) にも搭載されているので使ったことがある方も多いと思います. また, ギターアンプでも搭載されています.

• イコライザー

イコライザーの種類としては, 以下のものがあります.

3バンドイコライザー

低音域 (Bass)・中音域 (Middle)・高音域 (Treble) の3つの帯域の周波数特性を制御する. また, ギターアンプではこれらの3帯域にプラスして, 超高音域 (Presence) を設定可能な機種もある.

グラフィックイコライザー

10帯域ほどの周波数特性を制御することが可能であり, 3バンドイコライザーよりも自由度が高い音づくりができる.

また, イコライザーの原理はスペクトルとフィルタ (ローシェルビング・ハイシェルビング・ピーキング) に集約されます. もし, 原理についても簡単に理解しておきたい場合は, 以下のページを参考にしてください

• スペクトル
• フィルタ

Web Audio APIにおいて, イコライザーを実装するために必要なのは, BiquadFilterNodeクラスです. そして, BiquadFilterNodeインスタンスを生成するには, AudioContextインスタンスのcreateBiquadFilterメソッドを利用します.

BiquadFilterNodeが定義するフィルタの種類は全部で8つあります. ３バンドイコライザーを実装するためには, ローシェルビングフィルタ・ハイシェルビングフィルタ・ピーキングフィルタの3つが必要になります.

そして, BiquadFilterNodeインスタンスのtypeプロパティに, 対応する文字列を指定することで利用できます (表2 - 8 - a). ただし, 初期の仕様では, typeプロパティは数値型 (0 - 7) で, それぞれの数値がフィルタの種類に対応していました. したがって, サンプルコード 01のようにフォールバックを記述しておくと安全です.

サンプルコード 01

window.AudioContext = window.AudioContext || window.webkitAudioContext;

// Create the instance of AudioContext
var context = new AudioContext();

// Create the instance of OscillatorNode
var oscillator = context.createOscillator();  // for Input

// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop  = oscillator.stop  || oscillator.noteOff;

// Create the instance of BiquadFilterNode
var bass   = context.createBiquadFilter();
var middle = context.createBiquadFilter();
var treble = context.createBiquadFilter();

// Set type
bass.type   = (typeof bass.type   === 'string') ? 'lowshelf'  : 3;
middle.type = (typeof middle.type === 'string') ? 'peaking'   : 5;
treble.type = (typeof treble.type === 'string') ? 'highshelf' : 4;

3バンドイコライザーを構成するフィルタの機能は, 表2 - 8 - bのようになります.

具体的な周波数成分は, BiquadFilterNodeインスタンスのfrequencyプロパティで設定します.

サンプルコード 02

/*
 * Add code to sample code 01
 */

// ....

// Set frequency
bass.frequency.value   =  500;  //  500 Hz
middle.frequency.value = 1000;  // 1000 Hz
treble.frequency.value = 2000;  // 2000 Hz

500 Hz, 1000 Hz, 2000 Hzと (公比2の) 等比数列の関係で設定しているのは理由があります. このように設定することで, おおよその周波数帯域をコントロールすることが可能になるからです.

ちなみに, ローシェルビングフィルタではfrequencyプロパティ以下の, ハイシェルビングフィルタではfrequnecyプロパティ以上の帯域をブースト / カットすることになります.

ところが, ピーキングフィルタはfrequencyプロパティのみでは帯域幅を決定できません. ピーキングフィルタのfrequencyプロパティは, 帯域の中心周波数を決定するだけで帯域幅までは決定しません. ピーキングフィルタの帯域幅を決定するのは, BiquadFilterNodeインスタンスのQプロパティです.

サンプルコード 03

/*
 * Add code to sample code 02
 */

// ....

// Set Q (Quality Factor)
// bass.Q.value   = Math.SQRT1_2;  // Not used
middle.Q.value = Math.SQRT1_2;
// treble.Q.value = Math.SQRT1_2;  // Not used

一般的に, イコライザーのクオリティーファクタ (BiquadFilterNodeインスタンスのQプロパティ) は 1 / √ 2 に設定することが多いです. Web Audio APIにおける, ローシェルビングフィルタ / ハイシェルビングフィルタのQプロパティは無効なのでこの点には注意してください.

固定パラメータの設定はこれでOKです. あとは, ノード接続を実装します. イコライザーは, 原音の周波数特性を制御するので, インサート型エフェクトです. また, LFOやフィードバックの接続が不要なので, ノード接続は非常にシンプルです.

サンプルコード 04

/*
 * Add code to sample code 03
 */

// ....

// Connect nodes for effect (Equalizer) sound
// OscillatorNode (Input) -> BiquadFilterNode (Bass -> Middle -> Treble) -> AudioDestinationNode (Output)
oscillator.connect(bass);
bass.connect(middle);
middle.connect(treble);
treble.connect(context.destination);

// Start sound
oscillator.start(0);

周波数成分をブースト (増幅) / カット (減衰) するためには, BiquadFilterNodeインスタンスのgainプロパティを設定します. gainプロパティの範囲は, -40 dB 〜 40 dBと定義されており, プラスに設定すれば周波数成分がブーストされ, マイナスに設定すれば周波数成分がカットされます.

サンプルコード 05は, 低音域と高音域をブースト / 中音域をカットする設定で, リードギターで利用されることが多い, ドンシャリ系の音色になります.

サンプルコード 05

/*
 * Add code to sample code 04
 */

// ....

bass.gain.value   =  18;  // + 18dB (boost)
middle.gain.value = -18;  // - 18dB (cut)
treble.gain.value =  18;  // + 18dB (boost)

以上で3バンドイコライザーが完成しました. さっそく, デモ 22・デモ 23で試してみてください. パラメータをいろいろ設定して, 好みの音色を発見してください. 余力のある方はピーキングフィルタを1つ追加して超高音域が設定可能なイコライザーを実装してみてはいかがでしょうか.

デモ 22 (サウンド)

デモ 23 (オーディオ)

グラフィックイコライザーも3バンドイコライザーと同様に, BiquadFilterNodeクラスを利用することによって実装可能です. 3バンドイコライザーと異なるのは, フィルタの構成はすべてピーキングフィルタです.

グラフィックイコライザーが制御可能な帯域は機種によって異なりますが, とりあえず, 今回は10帯域を制御可能なグラフィックイコライザーを実装したいと思います.

まずは, BiquadFilterNodeインスタンスの生成と, それをピーキングフィルタに設定します.

サンプルコード 06

window.AudioContext = window.AudioContext || window.webkitAudioContext;

// Create the instance of AudioContext
var context = new AudioContext();

// Create the instance of OscillatorNode
var oscillator = context.createOscillator();  // for Input

// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop  = oscillator.stop  || oscillator.noteOff;

var NUM_BANDS = 10;
var peakings  = new Array(NUM_BANDS);

for (var i = 0; i < NUM_BANDS; i++) {
    // Create the instance of BiquadFilterNode
    var peaking = context.createBiquadFilter();

    // Set parameters
    peaking.type = (typeof peaking.type === 'string') ? 'peaking' : 5;

    peakings[i] = peaking;
}

次に, frequencyプロパティ, すなわち, 各ピーキングフィルタが制御する帯域の中心周波数を決定していきます. この中心周波数をやみくもに設定するのではなく, 3バンドイコライザーと同様に規則性をもつ値に設定することによって, おおよその周波数帯域をコントロールすることが可能になります.

最も低い中心周波数を31.25 Hz, 最も高い中心周波数を16 kHzとすると, 31.25 Hz, 62.5 Hz, 125 Hz, 250 Hz, 500 Hz, 1 kHz, 2 kHz, 4kHz, 8kHz, 16 kHzと設定すれば, 中心周波数が2倍ずつ増加していく (つまり, 公比2の等比数列) という規則性が得られます.

サンプルコード 07

window.AudioContext = window.AudioContext || window.webkitAudioContext;

// Create the instance of AudioContext
var context = new AudioContext();

// Create the instance of OscillatorNode
var oscillator = context.createOscillator();  // for Input

// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop  = oscillator.stop  || oscillator.noteOff;

var NUM_BANDS = 10;
var peakings  = new Array(NUM_BANDS);

// Center frequency
var frequency = 31.25;

for (var i = 0; i < NUM_BANDS; i++) {
    // Create the instance of BiquadFilterNode
    var peaking = context.createBiquadFilter();

    // Calculate center frequency
    if (i !== 0) {
        frequency *= 2;
    }

    // Set parameters
    peaking.type            = (typeof peaking.type === 'string') ? 'peaking' : 5;
    peaking.frequency.value = frequency;

    peakings[i] = peaking;
}

最後に, Qプロパティ, つまり, ピーキングフィルタが制御する帯域幅を決定していきます. 3バンドイコライザーと同じ1 / √ 2でも構いませんが, グラフィックイコライザーの場合は制御可能な帯域が細かいので, 帯域幅はそれより小さい (= Qプロパティが大きい) ほうがいいでしょう. このあたりは, 好みに応じて変えてもらってOKです. サンプルコードではとりあえず2に設定することにします.

サンプルコード 08

window.AudioContext = window.AudioContext || window.webkitAudioContext;

// Create the instance of AudioContext
var context = new AudioContext();

// Create the instance of OscillatorNode
var oscillator = context.createOscillator();  // for Input

// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop  = oscillator.stop  || oscillator.noteOff;

var NUM_BANDS = 10;
var peakings  = new Array(NUM_BANDS);

// Center frequency
var frequency = 31.25;

for (var i = 0; i < NUM_BANDS; i++) {
    // Create the instance of BiquadFilterNode
    var peaking = context.createBiquadFilter();

    // Calculate center frequency
    if (i !== 0) {
        frequency *= 2;
    }

    // Set parameters
    peaking.type            = (typeof peaking.type === 'string') ? 'peaking' : 5;
    peaking.frequency.value = frequency;
    peaking.Q.value         = 2;
    peaking.gain.value      = 0;  // The defaul value

    peakings[i] = peaking;
}

固定パラメータの設定はこれでOKです. あとは, ノード接続を実装します. 3バンドイコライザーと同様に, 原音の周波数特性を制御するので, インサート型エフェクトです. また, LFOやフィードバックの接続も不要です.

サンプルコード 08

/*
 * Add code to sample code 03
 */

// ....

// Connect nodes for effect (Equalizer) sound
// OscillatorNode (Input) -> BiquadFilterNode (Peaking Filter x 10) -> AudioDestinationNode (Output)
oscillator.connect(peakings[0]);

peakings.forEach(function(peaking, index) {
    if (index < (NUM_BANDS - 1)) {
        peaking.connect(peakings[index + 1]);
    } else {
        peaking.connect(context.destination);
    }
});

// Start sound
oscillator.start(0);

周波数成分をブースト (増幅) / カット (減衰) するためには, BiquadFilterNodeインスタンスのgainプロパティを設定します. プラスに設定すれば周波数成分がブーストされ, マイナスに設定すれば周波数成分がカットされるのは3バンドイコライザーと同じです.

以上でグラフィックイコライザーが完成しました. さっそく, デモ 24・デモ 25で試してみてください. 3バンドイコライザーよりも細かな制御が可能なので, パラメータをいろいろ設定して, 好みの音色を発見してください.

デモ 24 (サウンド)

デモ 25 (オーディオ)

このページでは, 3バンドイコライザー・グラフィックイコライザーの実装について解説しました. イコライザーのエッセンスは3つのフィルタ (ローシェルビングフィルタ・ハイシェルビングフィルタ・ピーキングフィルタ) に集約されています. したがって, これら3つのフィルタのパラメータについてまとめておきます.