Web Music Documentation

Autoplay Policy 対策

Web Audio API に限ったことではないですが, ページが開いたときに, ユーザーが意図しない音を聞かせるのはよくないという観点から (つまり, UX 上好ましくないという観点から), ブラウザでオーディオを再生する場合, Autoplay Policy という制限がかかります. これを解除するためには, ユーザーインタラクティブなイベント 発火後に AudioContext インスタンスを生成するか, もしくは, AudioContext インスタンスの resume メソッドを実行して AudioContextState を 'running' に変更する必要があります. これをしないと, オーディオを鳴らすことができません. また, decodeAudioData など一部のメソッドが Autoplay Policy 解除まで実行されなくなります. ユーザーインタラクティブなイベントとは, click, mousedown や touchstart などユーザーが明示的に操作することによって発火するイベントのことです. したがって, load イベントや mousemove など, 多くのケースにおいてユーザが明示的に操作するわけではないようなイベントでは Autoplay Policy の制限を解除することはできません.

document.addEventListener('click', () => {
  const context = new AudioContext();
});

resume メソッドで解除する場合 (この場合, コンソールには警告メッセージが表示されますが, Autoplay Policy は解除できるので無視して問題ありません).

const context = new AudioContext();

document.addEventListener('click', async () => {
  await context.resume();
});

これ以降のセクションでは, 本質的なコードを表記したいので, Autoplay Policy は解除されている状態を前提とします.

connect メソッド (AudioNode の接続)

現実世界の音響機器では, 入力と出力, あるいは, 音響変化も接続することで, その機能を果たします. 例えば, エレキギターであれば, サウンド入力を担うギターとサウンド出力を担うアンプ (厳密にはスピーカー) は, 単体ではその機能を果たしません. シールド線などで接続することによって機能します.

このことは, Web Audio API の世界も同じです. (AudioContext インスタンスを生成して,) サウンド入力点となる AudioNode のサブクラスのインスタンス (先ほどのコード例だと, OscillatorNode インスタンス) と, サウンド出力点となる AudioDestinationNode インスタンスを生成しただけではその機能を果たしません. 少なくとも, サウンド入力点と出力点を接続する処理が必要となります (さらに, Web Audio API が定義する様々なノードと接続することで, 高度なオーディオ処理を実現する API として真価を発揮します).

Web Audio API のアーキテクチャは, 現実世界における音響機器のアーキテクチャと似ています. このことは, Web Audio API の理解を進めていくとなんとなく実感できるようになると思います.

Web Audio APIにおいて「接続」の役割を担うのが, AudioNode がもつ connect メソッドです. 実装としては, AudioNode サブクラスのインスタンスの, connect メソッドを呼び出します. このメソッドの第 1 引数には, 接続先となる AudioNode のサブクラスのインスタンスを指定します.

const context = new AudioContext();

const oscillator = new OscillatorNode(context);

// OscillatorNode (Input) -> AudioDestinationNode (Output)
oscillator.connect(context.destination);

サウンドの入力点と出力点を接続し, 最小の構成を実装できました. しかし, まだ音は出せません. なぜなら, サウンドを開始するための音源スイッチをオンにしていないからです. 現実世界の音響機器も同じです. 現実世界がそうであるように, Web Audio API においても, 音源のスイッチをオン, オフする必要があります. そのためには, OscillatorNode クラスがもつ start メソッド, stop メソッド を呼び出します.

const context = new AudioContext();

const oscillator = new OscillatorNode(context);

// OscillatorNode (Input) -> AudioDestinationNode (Output)
oscillator.connect(context.destination);

// Start immediately
oscillator.start(0);

// Stop after 2.5 sec
oscillator.stop(context.currentTime + 2.5);

start メソッドの引数に 0 を指定していますが, これはメソッドが呼ばれたら, 即時にサウンドを開始します. stop メソッドの引数には, AudioContext インスタンスの currentTime プロパティに 2.5 を加算した値を指定していますが, これは, stop メソッドを実行してから, 2.5 秒後に停止することをスケジューリングしています (詳細は, のちほどのセクションで Web Audio API におけるスケジューリングとして解説しますが, AudioContext インスタンスの currentTime は, AudioContext インスタンスが生成されてからの経過時間を秒単位で計測した値が格納されています). stop メソッドの引数も 0 を指定すれば即時にサウンドを停止します. ちなみに, start メソッド, stop メソッドもデフォルト値は 0 なので, 引数を省略して呼び出した場合, 即時にサウンドを開始, 停止します.

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

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();

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 と同じなので特に違和感なく理解できるのではないでしょうか.

正弦波 (sin 波)

ここからは少し数学・物理的な話になってきます. 正弦波 (sin 関数) ってどんな形か覚えてらっしゃいますか？

具体的に解説するためにパラメータを設定します.

いかがでしたか ? 振幅と周波数は Web Audio API の解説においても頻出する用語なので, ある程度理解しておくと, Web Audio API の理解も進むでしょう.

基本波形

OscillatorNode の type プロパティ (OscillatorType) の値は, 正弦波を生成する文字列 'sine' 以外にも, 矩形波を生成する 'square' やノコギリ波を生成する 'sawtooth', 三角波を生成する 'triangle' があります. 正弦波の形はわかりましたが, それ以外はどのような形をしているのか見てみましょう.

矩形波・ノコギリ波・三角波のいずれも正弦波と同じように, 周期性をもつ波 (関数) であるということです. 周期性をもつので, 周波数の概念を適用することができます. そして, 最も重要な点ですが, 周期性をもつ波は周波数の異なる正弦波を合成してできるということです. 矩形波・ノコギリ波・三角波はいずれも周期性をもちます. 周期性をもつので, 矩形波・ノコギリ波・三角波はいずれも周波数の異なる正弦波を合成して生成することができます. シンセサイザーでも, 正弦波・矩形波・ノコギリ波・三角波は基本波形として, サウンド生成のベースとなる波形です. そして, Web Audio API においても, 基本波形はサウンド生成 (OscillatorNode) のベースになる波形です.

GainNode の gain プロパティと音の大きさ

GainNodeの gain プロパティ (AudioParam) を利用することで, 音の大きさを変えることができます. 物理的な視点で見ると, 振幅を操作することによって, 音の大きさを変えています.

OscillatorNode の frequency プロパティと音の高さ

OscillatorNode の frequency プロパティ (AudioParam) を利用することで, 音の高さを変えることができます. 物理的な視点で見ると, 周波数を操作することによって, 音の高さを変更しています.

仕様では, frequency プロパティのとりうる値の範囲は, 負のナイキスト周波数からナイキスト周波数までですが (ナイキスト周波数は, サンプリングのセクションで解説しています. ナイキスト周波数について理解がなければ, おおよそ, -20 kHz ~ 20 kHz と大雑把に把握していただいて問題ないです), 音楽アプリケーションなどで出力する音としてはそこまで設定できてもあまり意味はないでしょう. その理由は, 人間が聴きとることが可能な音の周波数の範囲は 20 Hz ~ 20000 Hz (20 kHz) 程度だからです.

さらに, 音程 (音の高さの差) として知覚可能な周波数の上限, 言い換えると, 音楽として有効な音の周波数はもっと低くなります (ピアノ 88 鍵の音域を参照してください).

OscillatorNode の detune プロパティと音の高さ

OscillatorNode の detune プロパティ (AudioParam) を利用することでも, 音の高さを変えることができます. 物理的な視点も frequency プロパティと同じです. ただし, detune プロパティは, 音楽的な視点で音の高さを変更します. detune プロパティの用途は, (音楽で言う) 半音よりも小さい範囲で音の高さを調整したり, オクターブ違いの音を生成・合成したりするために利用します. この機能によって, きめ細かいサウンド生成が可能になったり, サウンドを合成する場合において厚みをもたせることが可能になったりします. シンセサイザーのファインチューン機能や, エフェクターの 1 種であるオクターバーを実現するためにあると言えるでしょう.

frequency プロパティの単位は Hz (ヘルツ) で, 波が 1 sec の間に何回発生するのかを意味していました. 一方で, detune プロパティの単位は cent (セント) です. これは, 音楽の視点から音の高さをとらえた単位で, 1 オクターブの音程を 1200 で等分した値です.

1 つ高いラとか, 1 つ低いラのことを, 1 オクターブ高いラ, 1 オクターブ低いラと表現することがあります. 音楽的な視点でのオクターブはまさにそういう意味です.

オクターブを物理的な視点でみると, 周波数比が 1 : 2 の関係にある音程を意味しています. 具体的に説明すると, いわゆる普通のラ (A) (ギターの第 5 弦の開放弦) の周波数は 440 Hz です (キャリブレーションチューニングなどしている場合は別ですが ...). この音を基準に考えると, 1 オクターブ高いラの周波数は 880 Hz です. 周波数比が, 440 : 880 = 1 : 2 になります.

話を cent に戻すと, この 1 : 2 の音程を 1200 で割った値が 1 cent というわけです. なぜ, 1200 ? と疑問に思う方もいらっしゃると思いますが, ピアノをされる方は直感で理解できると思います. ピアノをされない方のために, 1 オクターブの音程間にピアノの鍵盤がいくつあるか数えてみましょう. 1 オクターブ間であればいいので, 好きな音から始めてください.

数えてみると, 12 個の鍵盤があります. 1 オクターブ間の音程を 1200 で割った (1200 分割した) 値が 1 cent でしたので, 1 オクターブ間の音程を 12 分割すると, 100 cent ということになります. つまり, 100 cent 値が高くなると, 右隣の鍵盤の音の高さに変わるということです.

例として, 440 Hz のラ (A) の音を 100 cent 高くすると, 右隣の鍵盤の ラ# (A#) に, さらに 100 cent 高くすると, シ (B) になります. このように, -100 cent ~ 100 cent の間の値を設定することによって, 半音以下の音の高さの調整が可能になるわけです. また, 1200 cent, あるいは, -1200 cent と 1200 cent ごとに値を設定することにより, オクターブ単位で調整することも可能です.

音楽では, 1 オクターブの音程を 12 等分した周波数比の関係を 12 平均音律と呼びます. 12 平均音律においては, 隣り合う音, つまり, 半音の周波数比は, およそ, 1 : 1.059463 (正確には, 1 : $2^{\left(1 / 12\right)}$) で, これが 100 cent となるわけです.

OscillatorNode の type プロパティと音色

OscillatorNode の type プロパティ (OscillatorType) の値を利用することで, 正弦波だけでなく, 矩形波やノコギリ波, 三角波を生成することができます. それによって, 音色を変化させることが可能です. ちなみに, 波形の概形はエンベロープと呼ばれます. OscillatorNode のみで制御可能な範囲では, この type プロパティに応じたエンベロープが音色に大きく影響しています.

AudioBuffer

AudioBuffer クラスは, オーディオデータの実体ですが, 直接的にアクセスすることはできません. そのためのメソッドや, デジタル化されたオーディオデータに必要なパラメータ (サンプリングレートやチャンネル数, オーディオデータ全体のサイズなど) を定義しています.

AudioBuffer の生成

AudioBuffer クラスに関して簡単に解説しましたが, 肝心なのは AudioBuffer インスタンスをどうやって生成するのかということだと思います. Web Audio API では, decodeAudioData メソッドを利用するか, createBuffer メソッドを利用することによって, AudioBuffer インスタンスを生成可能です.

もっとも, ワンショットオーディオ再生目的であれば, createBuffer メソッドを利用することはおそらくなく, ArrayBuffer インスタンスから AudioBuffer インスタンスを生成する decodeAudioData メソッドを利用することになると思います. したがって, まずは, ArrayBuffer インスタンスの取得に関して解説します (これは Web Audio API の解説というよりは, JavaScript で ArrayBuffer インスタンスを取得する方法なので, すでにご存知の場合はスキップして問題ないです).

fetch('./assets/one-shots/piano-C.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then((arrayBuffer) => {
    // TODO: Create instance of `ArrayBuffer` by calling `decodeAudioData`
  })
  .catch((error) => {
    // error handling
  });

const context = new AudioContext();

fetch('./assets/one-shots/piano-C.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then((arrayBuffer) => {
    const successCallback = (audioBuffer) => {
      // Create instance of `AudioBufferSourceNode`
    };

    const errorCallback = (error) => {
      // error handling
    };

    context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
  })
  .catch((error) => {
    // error handling
  });

これで, ワンショットオーディオを再生する最低限の処理ができているので, あとは AudioBufferSourceNode のインスタンスを生成します (ファクトリメソッドで生成する場合, createBufferSource メソッドを利用します).

const context = new AudioContext();

fetch('./assets/one-shots/piano-C.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then((arrayBuffer) => {
    const successCallback = (audioBuffer) => {
      const source = new AudioBufferSourceNode(context, { buffer: audioBuffer });

      // If use `createBufferSource`
      // const source = context.createBufferSource();
      //
      // source.buffer = audioBuffer;
    };

    const errorCallback = (error) => {
      // error handling
    };

    context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
  })
  .catch((error) => {
    // error handling
  });

registerProcessor メソッド

AudioWorkletGlobalScope で定義されている, 最も重要なメソッドが registerProcessor メソッドです. メインスレッドの AudioWorkletNode と, オーディオスレッドの AudioWorkletProcessor を継承したクラスを関連づける役割をもっているからです. 第 1 引数に, AudioWorkletNode のコンストラクタに関連づける文字列を, 第 2 引数に, AudioWorkletProcessor を継承したクラスを指定します (インスタンスではないので注意してください).

// Filename is './audio-worklets/processor.js'

class NoiseGeneratorProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
  }

  process(inputs, outputs, parameters) {
    // TODO: Audio Signal Processing

    return true;
  }
}

registerProcessor('NoiseGeneratorProcessor', NoiseGeneratorProcessor);

AudioWorkletProcessor の継承クラス

AudioWorklet を構成する API で, 実際にオーディオ信号処理を実行するのが, AudioWorkletProcessor クラスを継承したサブクラスです (AudioWorkletProcessor を継承したサブクラスを). AudioWorkletProcessor クラスで最も重要な API が process メソッドです. AudioWorkletProcessor を継承するサブクラスは process メソッドを必ずオーバライドする必要があります.

また, 実用的なことを考慮すると, MessagePort インスタンスであるport プロパティも事実上, 必須と言えます. AudioWorkletGlobalScope に定義されている AudioWorkletProcessor (を継承したサブクラス) は, メインスレッドで設定された値 (例えば, input[type="range"] で設定された値) を直接的に取得することができません. そこで, MessagePort インススタンスの messssage イベントハンドラや postMessage メソッドを利用して, いわゆる メッセージパッシング (Message Passing) でメインスレッドとデータを送受信する必要があります.

// Filename is './audio-worklets/processor.js'

class NoiseGeneratorProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
  }

  process(inputs, outputs, parameters) {
    // channel number is 0, 1, 2 ...
    // `output` is `[Float32Array, Float32Array, Float32Array ...]`
    const output = outputs[0];

    for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
      const bufferSize = output[channelNumber].length;

      for (let n = 0; n < bufferSize; n++) {
        output[channelNumber][n] = (2 * Math.random()) - 1;
      }
    }

    return true;
  }
}

registerProcessor('NoiseGeneratorProcessor', NoiseGeneratorProcessor);

<select>
  <option value="whitenoise" selected>White Noise</option>
  <option value="pinknoise">Pink Noise</option>
  <option value="browniannoise">Brownian Noise</option>
</select>

const context = new AudioContext();

// './audio-worklets/processor.js' is URL that has subclass that extends `AudioWorkletProcessor`
context.audioWorklet.addModule('./audio-worklets/processor.js')
  .then(() => {
    const processor = new AudioWorkletNode(context, 'NoiseGeneratorProcessor');

    // AudioWorkletNode (Input) -> AudioDestinationNode (Output)
    processor.connect(context.destination);

    document.querySelector('select').addEventListener('change', (event) => {
      processor.port.postMessage({ type: event.currentTarget.value });
    });
  })
  .catch((error) => {
    // error handling
  });

// Filename is './audio-worklets/processor.js'

class NoiseGeneratorProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    this.type = 'whitenoise';

    this.b0 = 0;
    this.b1 = 0;
    this.b2 = 0;
    this.b3 = 0;
    this.b4 = 0;
    this.b5 = 0;
    this.b6 = 0;

    this.lastOut = 0;

    this.port.onmessage = (event) => {
      if (event.data.type) {
        this.type = event.data.type;
      }
    };
  }

  process(inputs, outputs, parameters) {
    // channel number is 0, 1, 2 ...
    // `output` is `[Float32Array, Float32Array, Float32Array ...]`
    const output = outputs[0];

    switch (this.type) {
      case 'whitenoise': {
        for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
          const bufferSize = output[channelNumber].length;

          for (let n = 0; n < bufferSize; n++) {
            output[channelNumber][n] = (2 * Math.random()) - 1;
          }
        }

        break;
      }

      case 'pinknoise': {
        for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
          const bufferSize = output[channelNumber].length;

          for (let n = 0; n < bufferSize; n++) {
            const white = (2 * Math.random()) - 1;

            this.b0 = (0.99886 * this.b0) + (white * 0.0555179);
            this.b1 = (0.99332 * this.b1) + (white * 0.0750759);
            this.b2 = (0.96900 * this.b2) + (white * 0.1538520);
            this.b3 = (0.86650 * this.b3) + (white * 0.3104856);
            this.b4 = (0.55000 * this.b4) + (white * 0.5329522);
            this.b5 = (-0.7616 * this.b5) - (white * 0.0168980);

            output[channelNumber][n] = this.b0 + this.b1 + this.b2 + this.b3 + this.b4 + this.b5 + this.b6 + (white * 0.5362);
            output[channelNumber][n] *= 0.11;

            this.b6 = white * 0.115926;
          }
        }

        break;
      }

      case 'browniannoise': {
        for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
          const bufferSize = output[channelNumber].length;

          for (let n = 0; n < bufferSize; n++) {
            const white = (2 * Math.random()) - 1;

            output[channelNumber][n] = (this.lastOut + (0.02 * white)) / 1.02;

            this.lastOut = output[channelNumber][n];

            output[channelNumber][n] *= 3.5;
          }
        }

        break;
      }
    }

    return true;
  }
}

registerProcessor('NoiseGeneratorProcessor', NoiseGeneratorProcessor);

const context = new AudioContext();

// './audio-worklets/message.js' is URL that has subclass that extends `AudioWorkletProcessor`
context.audioWorklet.addModule('./audio-worklets/message.js')
  .then(() => {
    const oscillator = new OscillatorNode(context);
    const processor  = new AudioWorkletNode(context, 'MessageProcessor');

    // OscillatorNode (Input) -> AudioWorkletNode (Bypass) -> AudioDestinationNode (Output)
    oscillator.connect(processor);
    processor.connect(context.destination);

    oscillator.start(0);

    processor.port.onmessage = (event) => {
      if (event.data) {
        console.log(event.data);
      }
    };
  })
  .catch((error) => {
    // error handling
  });

// Filename is './audio-worklets/message.js'

class MessageProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
  }

  process(inputs, outputs) {
    const input  = inputs[0];
    const output = outputs[0];

    for (let channelNumber = 0, numberOfChannels = input.length; channelNumber < numberOfChannels; channelNumber++) {
      output[channelNumber].set(input[channelNumber]);
    }

    this.port.postMessage({ messaage: 'Bypass samples' });

    return true;
  }
}

registerProcessor('MessageProcessor', MessageProcessor);

// Filename is './audio-worklets/a-rate.js'

class NoiseGeneratorProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
      name          : 'noiseGain',
      defaultValue  : 1,
      minValue      : 0,
      maxValue      : 1,
      automationRate: 'a-rate'
    }];
  }

  constructor() {
    super();
  }

  process(inputs, outputs, parameters) {
    const output = outputs[0];

    for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
      const bufferSize = output[channelNumber].length;

      for (let n = 0; n < bufferSize; n++) {
        output[channelNumber][n] = (2 * Math.random()) - 1;
      }
    }

    return true;
  }
}

registerProcessor('NoiseGeneratorProcessor', NoiseGeneratorProcessor);

// Filename is './audio-worklets/a-rate.js'

class NoiseGeneratorProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
      name          : 'noiseGain',
      defaultValue  : 1,
      minValue      : 0,
      maxValue      : 1,
      automationRate: 'a-rate'
    }];
  }

  constructor() {
    super();
  }

  process(inputs, outputs, parameters) {
    const output = outputs[0];

    const gain = parameters.noiseGain;

    for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
      const bufferSize = output[channelNumber].length;

      for (let n = 0; n < bufferSize; n++) {
        output[channelNumber][n] = ((gain.length > 1) ? gain[n] : gain[0]) * ((2 * Math.random()) - 1);
      }
    }

    return true;
  }
}

registerProcessor('NoiseGeneratorProcessor', NoiseGeneratorProcessor);

// Filename is './audio-worklets/k-rate.js'

class NoiseGeneratorProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
      name          : 'noiseGain',
      defaultValue  : 1,
      minValue      : 0,
      maxValue      : 1,
      automationRate: 'k-rate'
    }];
  }

  constructor() {
    super();
  }

  process(inputs, outputs, parameters) {
    const output = outputs[0];

    const gain = parameters.noiseGain;

    for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
      const bufferSize = output[channelNumber].length;

      for (let n = 0; n < bufferSize; n++) {
        output[channelNumber][n] = gain[0] * ((2 * Math.random()) - 1);
      }
    }

    return true;
  }
}

registerProcessor('NoiseGeneratorProcessor', NoiseGeneratorProcessor);

const context = new AudioContext();

// './audio-worklets/a-rate.js' is URL that has subclass that extends `AudioWorkletProcessor`
context.audioWorklet.addModule('./audio-worklets/a-rate.js')
  .then(() => {
    const processor = new AudioWorkletNode(context, 'NoiseGeneratorProcessor');

    // AudioWorkletNode (Input) -> AudioDestinationNode (Output)
    processor.connect(context.destination);

    const audioParamMap = processor.parameters;
    const noiseGain = audioParamMap.get('noiseGain');

    // do something for scheduling parameter ...
    const t0 = context.currentTime;
    const t1 = t0 + 2.5;

    noiseGain.setValueAtTime(0, t0);
    noiseGain.linearRampToValueAtTime(1, t1);
  })
  .catch((error) => {
    // error handling
  });

ノイズ生成

すでに, 解説のサンプルコードとして記載していますが, Web Audio API でホワイトノイズやピンクノイズを生成する場合, AudioWorklet を利用する必要があります.

ノイズの生成は, 乱数生成がベースになっています. 特に, ホワイトノイズは乱数そのままであり (振幅の調整だけしている), その振幅スペクトルはすべての周波数成分を一様に含んでいます (ノイズ生成の詳細に関しては, How to Generate Noise with the Web Audio API を参考にしてください).

実際に, Web アプリケーションとして実装する場合, ユーザーインタラクティブな操作によって, 発音・停止をさせるケースが多くなるでしょう. そのために, AudioWorkletProcessor を継承したサブクラスで, 発音・停止のフラグを実装しておき, メインスレッドからの postMessage で切り替えるようにします. すでに解説しましたが, process メソッドで, false を返してしまうと, その AudioWorkletProcessor は破棄されるような仕様になっているので, 常に true を返し, 停止中の場合, 出力となる Float32Array にデータを格納しないという実装で停止を実装しています.

<button type="button">start</button>
<select>
  <option value="whitenoise" selected>White Noise</option>
  <option value="pinknoise">Pink Noise</option>
  <option value="browniannoise">Brownian Noise</option>
</select>

const context = new AudioContext();

// './audio-worklets/noise-generator.js' is URL that has subclass that extends `AudioWorkletProcessor`
context.audioWorklet.addModule('./audio-worklets/noise-generator.js')
  .then(() => {
    const processor = new AudioWorkletNode(context, 'NoiseGeneratorProcessor');

    // AudioWorkletNode (Input) -> AudioDestinationNode (Output)
    processor.connect(context.destination);

    document.querySelector('button[type="button"]').addEventListener('mousedown', (event) => {
      processor.port.postMessage({ processing: true });

      event.currentTarget.textContent = 'stop';
    });

    document.querySelector('button[type="button"]').addEventListener('mouseup', (event) => {
      processor.port.postMessage({ processing: false });

      event.currentTarget.textContent = 'start';
    });

    document.querySelector('select').addEventListener('change', (event) => {
      processor.port.postMessage({ type: event.currentTarget.value });
    });
  })
  .catch((error) => {
    // error handling
  });

// Filename is './audio-worklets/noise-generator.js'

class NoiseGeneratorProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    this.processing = false;

    this.type = 'whitenoise';

    this.b0 = 0;
    this.b1 = 0;
    this.b2 = 0;
    this.b3 = 0;
    this.b4 = 0;
    this.b5 = 0;
    this.b6 = 0;

    this.lastOut = 0;

    this.port.onmessage = (event) => {
      if (typeof event.data.processing === 'boolean') {
        this.processing = event.data.processing;
      }

      if (event.data.type) {
        this.type = event.data.type;
      }
    };
  }

  process(inputs, outputs, parameters) {
    if (!this.processing) {
      return true;
    }

    // channel number is 0, 1, 2 ...
    // `output` is `[Float32Array, Float32Array, Float32Array ...]`
    const output = outputs[0];

    switch (this.type) {
      case 'whitenoise': {
        for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
          const bufferSize = output[channelNumber].length;

          for (let n = 0; n < bufferSize; n++) {
            output[channelNumber][n] = (2 * Math.random()) - 1;
          }
        }

        break;
      }

      case 'pinknoise': {
        for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
          const bufferSize = output[channelNumber].length;

          for (let n = 0; n < bufferSize; n++) {
            const white = (2 * Math.random()) - 1;

            this.b0 = (0.99886 * this.b0) + (white * 0.0555179);
            this.b1 = (0.99332 * this.b1) + (white * 0.0750759);
            this.b2 = (0.96900 * this.b2) + (white * 0.1538520);
            this.b3 = (0.86650 * this.b3) + (white * 0.3104856);
            this.b4 = (0.55000 * this.b4) + (white * 0.5329522);
            this.b5 = (-0.7616 * this.b5) - (white * 0.0168980);

            output[channelNumber][n] = this.b0 + this.b1 + this.b2 + this.b3 + this.b4 + this.b5 + this.b6 + (white * 0.5362);
            output[channelNumber][n] *= 0.11;

            this.b6 = white * 0.115926;
          }
        }

        break;
      }

      case 'browniannoise': {
        for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
          const bufferSize = output[channelNumber].length;

          for (let n = 0; n < bufferSize; n++) {
            const white = (2 * Math.random()) - 1;

            output[channelNumber][n] = (this.lastOut + (0.02 * white)) / 1.02;

            this.lastOut = output[channelNumber][n];

            output[channelNumber][n] *= 3.5;
          }
        }

        break;
      }
    }

    return true;
  }
}

registerProcessor('NoiseGeneratorProcessor', NoiseGeneratorProcessor);

基本波形生成

基本波形の生成は, OscillatorNode を利用すれば可能ですが, OscillatorNode による波形生成は, いわゆる, フーリエ級数展開にもとづいた波形生成, つまり, 周波数の異なる sin 波の合成によって, 矩形波やノコギリ波, 三角波が生成されています (その証拠として, 波形を確認すると Gibbs の現象が発生していることが確認できます).

実は, 基本波形は, 直線を組み合わせることによって (近似した波形を) 生成することも可能です (その場合, Gibbs の現象は発生しなくなります).

<button type="button">start</button>
<select>
  <option value="sine" selected>Sine</option>
  <option value="square">Square</option>
  <option value="sawtooth">Sawtooth</option>
  <option value="triangle">Triangle</option>
</select>
<label for="range-frequency">frequency</label>
<input type="range" id="range-frequency" value="440" min="20" max="8000" step="1" />
<span id="print-frequency-value">440 Hz</span>

const context = new AudioContext();

// './audio-worklets/oscillator.js' is URL that has subclass that extends `AudioWorkletProcessor`
context.audioWorklet.addModule('./audio-worklets/oscillator.js')
  .then(() => {
    const processor = new AudioWorkletNode(context, 'OscillatorProcessor');

    // AudioWorkletNode (Input) -> AudioDestinationNode (Output)
    processor.connect(context.destination);

    document.querySelector('button[type="button"]').addEventListener('mousedown', (event) => {
      processor.port.postMessage({ processing: true });

      event.currentTarget.textContent = 'stop';
    });

    document.querySelector('button[type="button"]').addEventListener('mouseup', (event) => {
      processor.port.postMessage({ processing: false });

      event.currentTarget.textContent = 'start';
    });

    document.querySelector('select').addEventListener('change', (event) => {
      processor.port.postMessage({ type: event.currentTarget.value });
    });

    document.querySelector('input[type="range"]').addEventListener('input', (event) => {
      processor.port.postMessage({ frequency: event.currentTarget.valueAsNumber });

      document.getElementById('print-frequency-value').textContent = `${event.currentTarget.value} Hz`;
    });
  })
  .catch((error) => {
    // error handling
  });

// Filename is './audio-worklets/oscillator.js'

class OscillatorProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    this.processing = false;

    this.numberOfProcessedSamples = 0;

    this.type      = 'sine';
    this.frequency = 440;

    this.port.onmessage = (event) => {
      if (typeof event.data.processing === 'boolean') {
        this.processing = event.data.processing;
      }

      if ((typeof event.data.frequency === 'number') && (event.data.frequency > 0)) {
        this.frequency = event.data.frequency;
      }

      if (event.data.type) {
        this.type = event.data.type;
      }
    };
  }

  process(inputs, outputs, parameters) {
    if (!this.processing) {
      return true;
    }

    // channel number is 0, 1, 2 ...
    // `output` is `[Float32Array, Float32Array, Float32Array ...]`
    const output = outputs[0];

    const numberOfSamplesPer1Hz = sampleRate / this.frequency;

    for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
      const bufferSize = output[channelNumber].length;

      for (let n = 0; n < bufferSize; n++) {
        switch (this.type) {
          case 'sine': {
            output[channelNumber][n] = Math.sin((2 * Math.PI * this.frequency * this.numberOfProcessedSamples) / sampleRate);
            break;
          }

          case 'square': {
            output[channelNumber][n] = (this.numberOfProcessedSamples < (numberOfSamplesPer1Hz / 2)) ? 1 : -1;
            break;
          }

          case 'sawtooth': {
            const a = (2 * this.numberOfProcessedSamples) / numberOfSamplesPer1Hz;

            output[channelNumber][n] = a - 1;
            break;
          }

          case 'triangle': {
            const a = (4 * this.numberOfProcessedSamples) / numberOfSamplesPer1Hz;

            output[channelNumber][n] = (this.numberOfProcessedSamples < (numberOfSamplesPer1Hz / 2)) ? (-1 + a) : (3 - a);
            break;
          }
        }

        if (++this.numberOfProcessedSamples >= numberOfSamplesPer1Hz) {
          this.numberOfProcessedSamples = 0;
        }
      }
    }

    return true;
  }
}

registerProcessor('OscillatorProcessor', OscillatorProcessor);

リバースチャンネル

左チャンネルからのサウンド出力と右チャンネルからのサウンド出力を反転する単純なエフェクターです (ただし, その原理から, 左右チャンネルのサウンドデータが異なる場合にしか効果がありません). 一般的には, オーディオデータに対して適用するので, オーディオデータの準備として AudioBufferSourceNode か MediaElementAudioSourceNode を入力ノードとして, AudioWorkletNode に接続しておきます.

<div>
  <input type="file" />
  <label>Reverse <input type="checkbox" /></label>
</div>
<audio controls />

const context = new AudioContext();

// './audio-worklets/channel-reverser.js' is URL that has subclass that extends `AudioWorkletProcessor`
context.audioWorklet.addModule('./audio-worklets/channel-reverser.js')
  .then(() => {
    const reverser = new AudioWorkletNode(context, 'ChannelReverserProcessor');

    const inputElement    = document.querySelector('input[type="file"]');
    const checkboxElement = document.querySelector('input[type="checkbox"]');
    const audioElement    = document.querySelector('audio');

    let source = null;

    inputElement.addEventListener('change', (event) => {
      const file = event.currentTarget.files[0];

      audioElement.src = window.URL.createObjectURL(file);
    });

    checkboxElement.addEventListener('click', (event) => {
      reverser.port.postMessage({ reversing: event.currentTarget.checked });
    });

    audioElement.addEventListener('loadstart', () => {
      if (source === null) {
        source = new MediaElementAudioSourceNode(context, { mediaElement: audioElement });
      }

      // MediaElementAudioSourceNode (Input) -> AudioWorkletNode (Channel Reverser) -> AudioDestinationNode (Output)
      source.connect(reverser);
      reverser.connect(context.destination);
    });
  })
  .catch((error) => {
    // error handling
  });

// Filename is './audio-worklets/channel-reverser.js'

class ChannelReverserProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    this.reversing = false;

    this.port.onmessage = (event) => {
      if (typeof event.data.reversing === 'boolean') {
        this.reversing = event.data.reversing;
      }
    };
  }

  process(inputs, outputs) {
    const input  = inputs[0];
    const output = outputs[0];

    if ((input.length === 0) || (output.length === 0)) {
      return true;
    }

    if ((input.length !== 2) || (output.length !== 2)) {
      output[0].set(input[0]);
      return true;
    }

    if (this.reversing) {
      output[0].set(input[1]);
      output[1].set(input[0]);
    } else {
      output[0].set(input[0]);
      output[1].set(input[1]);
    }

    return true;
  }
}

registerProcessor('ChannelReverserProcessor', ChannelReverserProcessor);

ボーカルキャンセラ

一般的に, 音楽のオーディオデータはステレオで, 臨場感あるサウンドになるように, 左チャンネルと右チャンネルの音の大きさを調整しています. ボーカルの聴こえる位置は中央になるように左右のチャンネルを同じ音の大きさで録音し, ギターなどのボーカル以外の楽器音は, 左右どちらかの音の大きさを大きくして, 聴こえる位置が左右のどちらかになるように録音されています. このように録音されたオーディオデータであれば, 左右のチャンネルのサウンドデータの差分をとることにより, 左右均等に録音されているボーカルの音を取り除くことが可能になります. これが, ボーカルキャンセラです (ただし, その原理から, ドラムなど中央に位置する楽器音も取り除かれてしまいます).

<div>
  <input type="file" />
  <label>Depth <input type="range" id="range-depth" value="0" min="0" max="1" step="0.05" /><label>
</div>
<audio controls />

const context = new AudioContext();

// './audio-worklets/vocal-canceler.js' is URL that has subclass that extends `AudioWorkletProcessor`
context.audioWorklet.addModule('./audio-worklets/vocal-canceler.js')
  .then(() => {
    const canceler = new AudioWorkletNode(context, 'VocalCancelerProcessor');

    const inputElement = document.querySelector('input[type="file"]');
    const rangeElement = document.querySelector('input[type="range"]');
    const audioElement = document.querySelector('audio');

    let source = null;

    inputElement.addEventListener('change', (event) => {
      const file = event.currentTarget.files[0];

      audioElement.src = window.URL.createObjectURL(file);
    });

    rangeElement.addEventListener('input', (event) => {
      canceler.port.postMessage({ depth: event.currentTarget.valueAsNumber });
    });

    audioElement.addEventListener('loadstart', () => {
      if (source === null) {
        source = new MediaElementAudioSourceNode(context, { mediaElement: audioElement });
      }

      // MediaElementAudioSourceNode (Input) -> AudioWorkletNode (Vocal Canceler) -> AudioDestinationNode (Output)
      source.connect(canceler);
      canceler.connect(context.destination);
    });
  })
  .catch((error) => {
    // error handling
  });

// Filename is './audio-worklets/vocal-canceler.js'

class VocalCancelerProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    this.depth = 0;

    this.port.onmessage = (event) => {
      if ((typeof event.data.depth === 'number') && (event.data.depth >= 0)) {
        this.depth = event.data.depth;
      }
    };
  }

  process(inputs, outputs) {
    const input  = inputs[0];
    const output = outputs[0];

    if ((input.length === 0) || (output.length === 0)) {
      return true;
    }

    if ((input.length !== 2) || (output.length !== 2)) {
      output[0].set(input[0]);

      return true;
    }

    const bufferSize = input[0].length;

    for (let n = 0; n < bufferSize; n++) {
      output[0][n] = input[0][n] - (this.depth * input[1][n]);
      output[1][n] = input[1][n] - (this.depth * input[0][n]);
    }

    return true;
  }
}

registerProcessor('VocalCancelerProcessor', VocalCancelerProcessor);

setValueAtTime(value, startTime)

startTime にパラメータを value に設定する

linearRampToValueAtTime(value, endTime)

endTime にパラメータが value になるように線形的に (直線的に) 変化させる

exponentialRampToValueAtTime(value, endTime)

endTime にパラメータが value になるように指数関数的に変化させる

setTargetAtTime(target, startTime, timeConstant)

startTime になったら, パラメータを target に向けて, timeConstant の時間をかけて変化させる (より正確には, target の約 63.2% ($1 - \frac{1}{\mathrm{exp}}$) まで変化するのに, timeConstantの時間を要する)

setValueCurveAtTime(values, startTime, duration)

startTime になったら, Float32Array の values の値にしたがって, duration の時間をかけて変化させる

cancelScheduledValues(cancelTime)

cancelTime 以降のスケジューリングを解除する

cancelAndHoldAtTime(cancelTime)

cancelTime 以降のスケジューリングを解除する (cancelTime 時点の値を保持する)

エンベロープとは ?

エンベロープとは, 波形の概形のことです. テキストによる解説よりは, イラストによる解説が一目瞭然なので, 例として以下のような波形で説明します.

上記のエンベロープは, 振幅に対する波形の概形なので, 振幅エンベロープと呼びます. 振幅エンベロープを, 時間的に制御するオーディオ処理をエンベロープジェネレーターと呼びます.

エンベロープジェネレーターの実装において, パラメータのスケジュールの対象になるの GainNode インスタンスの gain プロパティです. gain プロパティは, AudioParam インスタンスであり, AudioParam で仕様定義されているパラメータのオートメーションメソッドを利用することで, パラメータをスケジュールすることが可能です (同様に, OscillatorNode インスタンスの frequency プロパティや, DelayNode インスタンスの delayTime プロパティ, BiquadFilterNode の frequency プロパティ ... など, AudioParam インスタンスであれば利用可能です. したがって, パラメータのオートメーションメソッドを理解することで, さまざまなエフェクトが試行錯誤可能になります).

gain プロパティの初期化

まず, 初期化処理として, setValueAtTime メソッドを実行します. 初期値として, 値を 0 に, また即時に初期化するように, AudioContext インスタンスの currentTime プロパティ (t0) を指定します.

const context = new AudioContext();

const buttonElement = document.querySelector('button[type="button"]');

const envelopegenerator = new GainNode(context);

let oscillator = null;

buttonElement.addEventListener('mousedown', () => {
  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> GainNode (Envelope Generator) -> AudioDestinationNode (Output)
  oscillator.connect(envelopegenerator);
  envelopegenerator.connect(context.destination);

  const t0 = context.currentTime;

  envelopegenerator.gain.setValueAtTime(0, t0);

  oscillator.start(0);

  buttonElement.textContent = 'stop';
})

attack

attack (アタック) は, ゲインが最大値, すなわち, 1 になるまでに要する時間です. そこで, attack の実装には, linearRampToValueAtTime メソッドを利用します (一般的には, 線形的に変化させますが, 指数関数的に変化させたい場合, exponentialRampToValueAtTime メソッドを使ってみてもよいでしょう). 注意が必要なのは, 第 2 引数です. attack time の値をそのまま指定してしまうとうまくいきません. なぜなら, 時間ではなく時刻を指定する必要があるからです. したがって, サウンド開始時刻 (変数 t0) に attack を加算した値 (変数 t1) を第 2 引数に指定します.

attack は, もう少しくだいて表現すれば, 音の立ち上がりの速さを決定するパラメータと言えます. 楽器で具体例をあげると, ピアノやギターは比較的音の立ち上がりが速い楽器で, バイオリンやフルートなどは比較的音の立ち上がりが遅い楽器です. すなわち, アタックを短くするとピアノやギターのように音の立ち上がりが速くなり, アタックを長くするとバイオリンやフルートのように音の立ち上がりが遅くなります. ちなみに, 音の立ち上がりが比較的速い (アタックが短い) エレキギターでは, バイオリン奏法と呼ばれる奏法があります. これは, ピッキング時に, ギターのボリュームを0にすることによって, ピッキングした瞬間の音 (アタック音) を消し, そのあとに, ボリュームを増加させるという奏法です. エレキギターであるのに, まるでバイオリンのような音色を奏でることができます.

const context = new AudioContext();

const buttonElement = document.querySelector('button[type="button"]');

const envelopegenerator = new GainNode(context);

const attack = 0.01;

let oscillator = null;

buttonElement.addEventListener('mousedown', () => {
  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> GainNode (Envelope Generator) -> AudioDestinationNode (Output)
  oscillator.connect(envelopegenerator);
  envelopegenerator.connect(context.destination);

  const t0 = context.currentTime;
  const t1 = t0 + attack;

  envelopegenerator.gain.setValueAtTime(0, t0);
  envelopegenerator.gain.linearRampToValueAtTime(1, t1);

  oscillator.start(0);

  buttonElement.textContent = 'stop';
});

decay / sustain

decay (ディケイ) は, ゲインが最大値 1 から sustain (サステイン) にまで減衰する時間です. setTargetAtTime メソッドを利用することで実装できます. 注意が必要なのは, 第 2 引数と第 3 引数です. 第 2 引数にはパラメータが変化を開始する時刻を指定し, 第 3 引数にはパラメータが第 1 引数で指定した値 (の約 63.2%) まで変化するのに要する時間を指定します. したがって, 第 2 引数は gain プロパティが 1 となる時刻 (減衰開始時刻) である変数 t1 を指定し, 第 3 引数は decay time である変数 t2を指定します. そして, 第 1 引数は gain プロパティが収束する値である sustain level (サステインレベル) を指定します.

attack, decay, release は物理量が時間なのに対して, sustain のみゲインなので注意してください.

const context = new AudioContext();

const buttonElement = document.querySelector('button[type="button"]');

const envelopegenerator = new GainNode(context);

const attack  = 0.01;
const decay   = 0.3;
const sustain = 0.5;

let oscillator = null;

buttonElement.addEventListener('mousedown', () => {
  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> GainNode (Envelope Generator) -> AudioDestinationNode (Output)
  oscillator.connect(envelopegenerator);
  envelopegenerator.connect(context.destination);

  const t0 = context.currentTime;
  const t1 = t0 + attack;
  const t2 = decay;

  const t2Level = sustain;

  envelopegenerator.gain.setValueAtTime(0, t0);
  envelopegenerator.gain.linearRampToValueAtTime(1, t1);
  envelopegenerator.gain.setTargetAtTime(t2Level, t1, t2);

  oscillator.start(0);

  buttonElement.textContent = 'stop';
});

release

release (リリース) は, ゲインが sustain から最小値 0 に変化するまでの時間です. decay / sustain と同じく, setTargetAtTime メソッドを利用することで実装できます. gain プロパティを 0 に近づけていくので, 第 1 引数には 0 を指定します. 第 2 引数に指定するリリースの開始時刻は, AudioContext インスタンスの currentTime プロパティ値です. また, 第 3 引数には変化に要する時間, すなわち, release time (リリースタイム) を指定します.

ドラムのような音の余韻が短い楽器をシミュレートしたり, スタッカート (音を短く切って演奏する楽譜の記号) を実現したりする場合は release を短く, 逆に, ダンパーペダルを踏んだピアノの音や, フェルマータ (音を長く伸ばして演奏する楽譜の記号) を実現したりする場合は release を長くします.

const context = new AudioContext();

const buttonElement = document.querySelector('button[type="button"]');

const envelopegenerator = new GainNode(context);

const attack  = 0.01;
const decay   = 0.3;
const sustain = 0.5;
const release = 1.0;

let oscillator = null;

buttonElement.addEventListener('mousedown', () => {
  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> GainNode (Envelope Generator) -> AudioDestinationNode (Output)
  oscillator.connect(envelopegenerator);
  envelopegenerator.connect(context.destination);

  const t0 = context.currentTime;
  const t1 = t0 + attack;
  const t2 = decay;

  const t2Level = sustain;

  envelopegenerator.gain.setValueAtTime(0, t0);
  envelopegenerator.gain.linearRampToValueAtTime(1, t1);
  envelopegenerator.gain.setTargetAtTime(t2Level, t1, t2);

  oscillator.start(0);

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (oscillator === null) {
    return;
  }

  const t3 = context.currentTime;
  const t4 = release;

  envelopegenerator.gain.setTargetAtTime(0, t3, t4);

  buttonElement.textContent = 'start';
});

リリースを実装する場合は, OscillatorNode インスタンスの stop メソッドの即時実行は不要です. その理由は, stop メソッドを即時実行すると, その時点で音が停止してしまうので, 音に余韻が生まれません. といっても, このままでは, start メソッドの多重呼び出しになります. すなわち, start メソッドと stop メソッドは一対ということが順守できていません.

そこで, タイマー処理で gain プロパティをチェックして, 停止とみなせる値になれば, stop メソッドを実行します. ここで, 最小値である 0 と表現しなかったのは理由があります. 確かに, 理論上は, 停止とみなせる値は 0 ですが, 実装上では, (原因はわかりませんが) 半永久的に 0 にはなりません. したがって, 停止とみなせる値を 0.001 未満と設定しています.

また, 停止とみなせる値になる前に, 再度, mousedown した場合は, OscillatorNode を即時停止します.

const context = new AudioContext();

const buttonElement = document.querySelector('button[type="button"]');

const envelopegenerator = new GainNode(context);

const attack  = 0.01;
const decay   = 0.3;
const sustain = 0.5;
const release = 1.0;

let oscillator = null;
let intervalid = null;

buttonElement.addEventListener('mousedown', () => {
  if (oscillator !== null) {
    oscillator.stop(0);
    oscillator = null;
  }

  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> GainNode (Envelope Generator) -> AudioDestinationNode (Output)
  oscillator.connect(envelopegenerator);
  envelopegenerator.connect(context.destination);

  const t0 = context.currentTime;
  const t1 = t0 + attack;
  const t2 = decay;

  const t2Level = sustain;

  envelopegenerator.gain.setValueAtTime(0, t0);
  envelopegenerator.gain.linearRampToValueAtTime(1, t1);
  envelopegenerator.gain.setTargetAtTime(t2Level, t1, t2);

  oscillator.start(0);

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (oscillator === null) {
    return;
  }

  const t3 = context.currentTime;
  const t4 = release;

  envelopegenerator.gain.setTargetAtTime(0, t3, t4);

  buttonElement.textContent = 'start';

  intervalid = window.setInterval(() => {
    if (envelopegenerator.gain.value >= 1e-3) {
      return;
    }

    // Stop sound (If use `OscillatorNode`)
    oscillator.stop(0);
    oscillator = null;

    if (intervalid !== null) {
      window.clearInterval(intervalid);
      intervalid = null;
    }
  }, 0);
});

これで, 完成しました ... と言いたいところですが, 1 つ問題点があります. もし, attack time もしくは decay time が経過する前に, mouseup イベントが発生するとどうなるでしょう ? attack, decay のゲイン変化のスケジューリングと, release　におけるゲイン変化のスケジューリングが混在してしまいますね. つまり, 上記のコードだと, 意図したスケジューリングにならない可能性があるという問題点があります. これを解決するには, イベント発生時にスケジューリングをすべて解除すれば解決します. そして, スケジューリングの解除には, cancelScheduledValuesメソッド, もしくは, 値をそのまま保持しておきたい場合は, cancelAndHoldAtTime メソッドを利用します.

具体的には, mouseup 時は, 値を保持しておきたいので, cancelAndHoldAtTime メソッドでスケジューリングを解除します. また, ボタンが連打された場合に不要なスケジューリングが解除されるように, mousedown 時は, cancelScheduledValues メソッドでスケジューリングを解除します (そのあと setValueAtTime メソッドで 0 に初期化されるので値を保持する必要がないので).

const context = new AudioContext();

const buttonElement = document.querySelector('button[type="button"]');

const envelopegenerator = new GainNode(context);

const attack  = 0.01;
const decay   = 0.3;
const sustain = 0.5;
const release = 1.0;

let oscillator = null;
let intervalid = null;

buttonElement.addEventListener('mousedown', () => {
  if (oscillator !== null) {
    oscillator.stop(0);
    oscillator = null;
  }

  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> GainNode (Envelope Generator) -> AudioDestinationNode (Output)
  oscillator.connect(envelopegenerator);
  envelopegenerator.connect(context.destination);

  const t0 = context.currentTime;
  const t1 = t0 + attack;
  const t2 = decay;

  const t2Level = sustain;

  envelopegenerator.gain.cancelScheduledValues(t0);
  envelopegenerator.gain.setValueAtTime(0, t0);
  envelopegenerator.gain.linearRampToValueAtTime(1, t1);
  envelopegenerator.gain.setTargetAtTime(t2Level, t1, t2);

  oscillator.start(0);

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (oscillator === null) {
    return;
  }

  const t3 = context.currentTime;
  const t4 = release;

  envelopegenerator.gain.cancelAndHoldAtTime(t3);
  envelopegenerator.gain.setTargetAtTime(0, t3, t4);

  buttonElement.textContent = 'start';

  intervalid = window.setInterval(() => {
    if (envelopegenerator.gain.value >= 1e-3) {
      return;
    }

    // Stop sound (If use `OscillatorNode`)
    oscillator.stop(0);
    oscillator = null;

    if (intervalid !== null) {
      window.clearInterval(intervalid);
      intervalid = null;
    }
  }, 0);
});

if (typeof envelopegenerator.gain.cancelAndHoldAtTime === 'function') {
  envelopegenerator.gain.cancelAndHoldAtTime(t3);
} else {
  const value = envelopegenerator.gain.value;

  envelopegenerator.gain.cancelScheduledValues(t3);
  envelopegenerator.gain.setValueAtTime(value, t3);
}

エンベロープジェネレーターの応用

エンベロープジェネレーターの実装, すなわち, gain プロパティのスケジューリングは, オーディオソースに依存したことではないので, AudioBufferSourceNode をオーディオソースとして利用することで, ワンショットオーディオにもエンベロープジェネレーターを適用することが可能になります. また, attack と release を楽曲データの再生に適用することで, フェードイン・フェードアウトの実装も可能になります.

参照が残っていない

これに関しては, Web Audio API に限らず, JavaScript, あるいは, ガベージコレクションが実装されているあらゆるプログラミング言語一般的なことです.

処理すべきサウンドデータが残っていない

処理すべきサウンドデータが意図せずに残るケースとして, DelayNode や ConvolverNode を利用して, エフェクターであるディレイやリバーブを実装した場合が考えられますが, 実装的には対処する必要はありません. 処理すべきサウンドデータがある場合に, サウンドデータを完了状態にするのは, DelayNode や ConvolverNode の役割であるのと, そもそも, このような場合に処理が残っているサウンドデータを破棄するなどの手段が現状の仕様では存在しないからです.

ノードが接続されていない

不要になった AudioNode インスタンスは, disconnect メソッドでノードの接続を解除しておくのが律儀ではありますが, 参照を破棄することで, 同時にノードの接続も解除されるので, 明示的に実装する必要はありません. ちなみに, disconnect メソッドのユースケースとしては, 例えば, ユーザーインタラクティブな操作などで動的にノードの接続を解除する必要がある場合ぐらいです.

以下のコードは, ノード接続状態のまま, 参照を破棄していますが, 同時にノード接続も解除されるのでメモリリークに陥ることはありません.

const context = new AudioContext();

let oscillator = null;

window.setInterval(() => {
  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> AudioDestinationNode (Output)
  oscillator.connect(context.destination);
}, 10);

サウンドが停止している

以下のコードは, サウンドが発音状態なので, ガベージコレクションが実行されず, メモリがしだいに不足していく例です. その理由は, コールバック関数実行のたびに, 以前のインスタンスへの参照は破棄されますが, それに対応するサウンドが停止していないからです.

const context = new AudioContext();

let oscillator = null;

window.setInterval(() => {
  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> AudioDestinationNode (Output)
  oscillator.connect(context.destination);

  oscillator.start(0);
}, 10);

スケジューリングが設定されていない

以下のコードは, 参照を破棄して, サウンドを停止状態にしていますが, 時間が経過するほど, サウンドの開始が少しずつ遅延するようにサウンドスケジューリングしているので, ガベージコレクションの実行もそれにともなって遅れるので, メモリが不足していきます.

const context = new AudioContext();

let oscillator = null;

let counter = 0;

window.setInterval(() => {
  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> AudioDestinationNode (Output)
  oscillator.connect(context.destination);

  const startTime = context.currentTime + counter;
  const stopTime  = startTime + 10;

  oscillator.start(startTime);
  oscillator.stop(stopTime);

  ++counter;
}, 10);

サンプリング (標本化)

サンプリング (標本化)は, 時間を離散した値に変換する処理です. 離散信号, すなわち, とびとびの値をとっていくためには, その間隔を決定するパラメータが必要になります. それが, サンプリング周期 (標本化周期) です. サンプリング周期の逆数となるパラメータは, 標本化周波数 (サンプリング周波数) です. 簡単に解説すれば, サンプリング周波数は, 1 sec の間に, いくつのサンプル (離散点) をとるか ? ということを意味しています. 例えば, サンプリング周波数が 48000 Hz の場合, 1 sec の間に 48000 サンプル (離散点) をとることになります.

サンプリング (標本化) では重要な定理があります. それは, サンプリング周波数の $\frac{1}{2}$ 以上の周波数は元のアナログ信号に復元できないという定理です. この定理は, サンプリング定理 (標本化定理, シャノンの定理) と呼ばれます. 逆の視点で表現すれば, サンプリング周波数の $\frac{1}{2}$ より低い周波数は元のアナログ信号に復元可能ということです. また, サンプリング周波数の $\frac{1}{2}$ は, ナイキスト周波数と呼ばれます. サンプリング定理から, 原信号に含まれる最大の周波数成分の 2 倍より大きいサンプリング周波数に設定すれば, 元のアナログ信号に復元可能ということになります (実際には, 低域通過フィルタ (Low-Pass Filter) を利用して, 高い周波数成分を除去するプリプロセス処理を施します).

サンプリング定理を満たさないサンプリング周波数, すなわち, 原信号に含まれる最大の周波数成分の 2 倍以下のサンプリング周波数でサンプリングすると, 折り返し歪み (エイリアス歪み) が発生して, ノイズとして復元されてしまいます.

例えば, 1 Hz の信号に対して, 2 サンプル (サンプリング周波数 2 Hz, ナイキスト周波数 1 Hz) では原信号に復元できません.

1 Hz の信号に対して, 3 サンプル (サンプリング周波数 3 hz, ナイキスト周波数 1.5 Hz) だと, 精度は低いですが, 原信号に復元できます

サンプリングの精度を高くするほど, すなわち, サンプリング周波数を高くするほど元のアナログ信号に対してより精度の高いデジタル信号に変換可能となります. 一方で, データサイズはサンプリング周波数に比例して大きくなってしまいます.

以下の図は, 充分なサンプル数 (サンプリング周波数) だと原信号により精度高く復元できること表しています. そのトレードオフとして, サンプル数が多くなるので, データサイズはより大きくなることも表しています.

サンプリング周波数の具体例として, 音楽 CD は 44.1 kHz に設定されています. 人間の聴覚が知覚可能な周波数はおよそ 20 kHzであることを考慮してサンプリング定理を適用しているからです. さらに音質の高いものだと 96 kHz 以上に設定されている音楽データもあります (ハイレゾオーディオのサンプリング周波数). 電話では 8 kHz に設定されています. 音声の場合は, 多少音質が損なわれても相手の音声を聴きとることが可能なこと, 楽器音ほど高い周波数成分が含まれないこと, リアルタイムに通信するので可能な限りデータサイズを減らす必要があることなどが理由としてあげられます.

Web Audio API では, AudioContext インスタンス生成時の引数として, AudioContextOptions の sampleRate プロパティで明示的に指定することが可能です. 明示的に指定しない場合, デバイスのサンプリング周波数 (44100, 48000 など) に設定されています.

サウンドの視覚化の実装では, サンプリング周波数 (AudioContext インスタンス, または, AudioBuffer インスタンスの sampleRate プロパティ) にアクセスすることはよくあります. したがって, サンプリング周波数が何を意味しているのか ? ということと, サンプリング定理に関して理解しておくと役に立つでしょう.

量子化

量子化は, 振幅を離散した値に変換する処理です. サンプリングと同じく, とびとびの値をとっていくためには, その間隔を決定づけるパラメータが必要になります. それが, 量子化ビット (量子化精度) です.

サンプリングされたアナログ信号は時間軸方向は, 離散化されていますが, 振幅軸の方向は連続したままです. 量子化では, 量子化ビットで指定された精度にしたがって, 振幅を整数値に丸める処理を実行します. 例えば, 量子化ビットが 2 bit の場合, 4 つのステップの値 ($2^{2} = 4$) のいずれかに, 3 bit の場合, 8 つのステップの値 ($2^{3} = 8$) のいずれかに振幅が丸められます.

量子化の丸め処理によって生じる誤差を, 量子化雑音と呼びます. 量子化ビットが小さいほど, 丸め処理による誤差が大きくなり, 原信号への復元も精度が低くなってしまいます. 逆に, 量子化の精度を高くするほど, すなわち, 量子化ビットを大きくするほど, 量子化雑音は少なくなり (誤差が小さくなり), 原信号への復元の精度も高くなりますが, データサイズは量子化ビットに比例して大きくなります.

音楽 CD での量子化ビットは 16 bit に設定されています. ハイレゾオーディオの量子化ビットは 24 bit 以上が必要条件となっています.

符号化

サンプリングによって, 時間軸方向に離散化し, それぞれのサンプル点を, 量子化によって丸めた整数値に 2 進数を割り当てていきます. 量子化した (整数値に丸めた) 振幅を 2 進数に符号化すると, コンピュータの内部で処理することが可能なデジタル信号となります.

サンプリング周波数 16 Hz, 量子化ビット 4 bit, 2 の補数方式で符号化した例です.

フーリエ級数

周期関数は, 周波数の異なる余弦波と正弦波の級数で近似することができます. この級数が, フーリエ級数であり, 周期関数をフーリエ級数で表現する場合, フーリエ級数展開 と呼ばれます. $x\left(t\right)$が, 周期 $T$ の場合, フーリエ級数は以下の数式で定義されます.

$a_{n}$, $b_{n}$ は フーリエ係数で, 物理的には各周波数成分の振幅を表しています. また, $\frac{2 \pi}{T} = 2 \pi f$ は, 角速度 $\omega$ で定義される場合もあります.

厳密には, フーリエ級数が成立する条件は, 周期関数であるだけでは不十分で, ディリクレの条件と合わせて十分条件となります. これを理解するためには, 三角関数の基本的な性質 (高校レベルの数学) や三角関数の直交性などをもとに, リーマン・ルベーグの補助定理やパーセバルの等式などを理解する必要があるので, 数学的な厳密性を理解したい場合は, それぞれ最適なドキュメントを参考にしてください.

ここでは, 視覚的に理解するために, 周波数の異なる正弦波の級数で, 矩形波やノコギリ波, 三角波を生成してみます. また, 級数を大きくする (項数を大きくする) ほど, 実際の波形により近似することもわかります.

余弦波と正弦波で表現されるフーリエ級数に, オイラーの公式 ($j$ は $j^{2} = -1$ となる虚数単位) を適用すると, 複素フーリエ級数を導出可能です (つまり, 複素フーリエ級数は, より一般化したフーリエ級数と言えます. さらに一般化を進めると, フーリエ変換となります).

物理的な観点で理解すると, 複素フーリエ級数は, 余弦波と正弦波の 2 次元の振動現象であるフーリエ級数を, 3 次元の回転へと拡張します. また, 複素フーリエ級数によって, フーリエ級数の問題点, すなわち, 位相をシフトするとフーリエ係数の値が変化する問題 (余弦波と正弦波は位相の違いでしかないので, 原信号が同じでもフーリエ係数が異なることが起きうる) を発展的に解決します.

フーリエ変換

フーリエ級数が周期関数のみ適用可能だったのを, 非周期関数にも適用できるように, さらに拡張したフーリエ級数がフーリエ変換です. フーリエ級数から, フーリエ変換を導出するには, 非周期, つまり, 周期を $\infty$ に拡張して導出します. 具体的には, 複素フーリエ級数の係数 $c_{n}$ の周期 $T$ を $\infty$ に拡張すると, 角速度 $\omega (= \frac{2 \pi}{T} = 2 \pi f)$ が連続的な角速度になることで導出できます (以下は, フーリエ変換と逆フーリエ変換の定義式です).

フーリエ変換の厳密な導出を理解するには, デルタ関数や単位階段関数の理解が必要になります (さらに, フーリエ変換では, 絶対可積分 ($\int_{-\infty}^{\infty}\left|f\left(t\right)\right|dt \lt \infty$ ) が必要条件となります. フーリエ級数からフーリエ変換の数学的な導出の詳細に関しては, それぞれ最適なドキュメントを参考にしてください).

離散フーリエ変換 (DFT)

コンピュータで実現する場合, 無限区間の積分は原理上できないので, ある区間で和分を算出する必要があります. これが, 離散フーリエ変換 (DFT: Discrete Fourier Transform)です (余談ですが, コンピュータにおいて, 積分は和分, 微分は差分で実装します).

フーリエ変換から, 離散フーリエ変換を導出するには, 周波数 (周期) と, サンプリング周波数 (サンプリング周期) を数列 (離散値) で対応づけます. $f_{s}$ は, サンプリング周波数 ($T_{s}$ は, サンプリング周期). また, 離散フーリエ変換は, 一定のサイズで変換する必要があるので $N$ は, 離散フーリエ変換のサンプル数です (Web Audio API では, AnalyserNode の fftSize プロパティの値に相当します).

そして, 積分は和分になるので, これらをフーリエ変換の式に適用して, 変形すると, 離散フーリエ変換と逆離散フーリエ変換の定義式が導出できます. $x\left(n\right)$, および, $X\left(k\right)$ は, サンプリングした信号です. 数学的には数列, プログラミング的には配列のような順序性をもつ数値のコレクションと考えると理解しやすいかもしれません.

多くのプログラミング言語において, 配列のようなコレクションのインデックスは 0 から開始するので, 離散フーリエ変換の積和演算の範囲も, 0 から開始している点と有界となっている点に着目してください.

また, $e^{-j\frac{2 \pi n}{N}}$ は, 回転因子 (回転子) と呼ばれ, 以下のように定義されます.

回転因子は, 例えば, $N$ を 8 とした場合, 複素平面上の単位円を 8 分割するような回転を表現します.

このことから, 回転因子は以下のような性質をもっています (また, 離散フーリエ変換のサイズ $\frac{N}{2}$ は, ナイキスト周波数成分のインデックスに相当します).

• $W^{n + N} = W^{n}$
• $W^{n + \frac{N}{2}} = -W^{n}$

以下は, 回転因子で定義した離散フーリエ変換と逆離散フーリエ変換です. 高速フーリエ変換では, 回転因子の性質 (周期性による対称性や半周期性の負の対称性) を利用して, 各要素の計算量を減らして演算の高速化を実現しています.

高速フーリエ変換 (FFT)

高速フーリエ変換 (FFT: Fast Fourier Transform) は, 回転因子の性質を利用して, 離散フーリエ変換では (時間) 計算量を $O\left(N^{2}\right)$ 要するのを, $O\left(N\mathrm{log_{2}}N\right)$ にまで減らして, コンピュータでのフーリエ変換を高速化するアルゴリズムです. ただし, 回転因子の性質を利用する関係上, フーリエ変換のサイズが 2 の冪乗の場合のみ高速化できるという制約がつきます (この制約に関しては, 0 埋め処理などによって, 強制的にフーリエ変換のサイズを 2 の冪乗にするなどして解決できます). Web Audio API においても, AnalyserNode の fftSize プロパティがとりうる値は, すべて 2 の冪乗です.

実際に, どのように計算量を削減しているのかを解説していきます.

function pow2(n) {
  return 2 ** n;
}

/**
 * FFT
 *
 * @param {Float32Array} reals This argument is instance of `Float32Array` for real number.
 * @param {Float32Array} imags This argument is instance of `Float32Array` for imaginary number.
 * @param {number} size This argument is FFT size (power of two).
 */
function FFT(reals, imags, size) {
  const indexes = new Uint16Array(size);  // FFT size is `0` between `65535`.

  const numberOfStages = Math.log2(size);

  for (let stage = 1; stage <= numberOfStages; stage++) {
    for (let i = 0; i < pow2(stage - 1); i++) {
      const rest = numberOfStages - stage;

      for (let j = 0; j < pow2(rest); j++) {
        const n = i * pow2(rest + 1) + j;
        const m = pow2(rest) + n;
        const w = 2.0 * Math.PI * j * pow2(stage - 1);

        const areal = reals[n];
        const aimag = imags[n];
        const breal = reals[m];
        const bimag = imags[m];
        const wreal = Math.cos(w / size);
        const wimag = -1 * Math.sin(w / size);  // Clockwise

        if (stage < numberOfStages) {
          reals[n] = areal + breal;
          imags[n] = aimag + bimag;
          reals[m] = (wreal * (areal - breal)) - (wimag * (aimag - bimag));
          imags[m] = (wreal * (aimag - bimag)) + (wimag * (areal - breal));
        } else {
          reals[n] = areal + breal;
          imags[n] = aimag + bimag;
          reals[m] = areal - breal;
          imags[m] = aimag - bimag;
        }
      }
    }
  }

  for (let stage = 1; stage <= numberOfStages; stage++) {
    const rest = numberOfStages - stage;

    for (let i = 0; i < pow2(stage - 1); i++) {
      indexes[pow2(stage - 1) + i] = indexes[i] + pow2(rest);
    }
  }

  for (let k = 0; k < size; k++) {
    if (indexes[k] <= k) {
      continue;
    }

    const real = reals[indexes[k]];
    const imag = imags[indexes[k]];

    reals[indexes[k]] = reals[k];
    imags[indexes[k]] = imags[k];

    reals[k] = real;
    imags[k] = imag;
  }
}

/**
 * IFFT
 *
 * @param {Float32Array} reals This argument is instance of `Float32Array` for real number.
 * @param {Float32Array} imags This argument is instance of `Float32Array` for imaginary number.
 * @param {number} size This argument is IFFT size (power of two).
 */
function IFFT(reals, imags, size) {
  const indexes = new Uint16Array(size);  // FFT size is `0` between `65535`.

  const numberOfStages = Math.log2(size);

  for (let stage = 1; stage <= numberOfStages; stage++) {
    for (let i = 0; i < pow2(stage - 1); i++) {
      const rest = numberOfStages - stage;

      for (let j = 0; j < pow2(rest); j++) {
        const n = i * pow2(rest + 1) + j;
        const m = pow2(rest) + n;
        const w = 2.0 * Math.PI * j * pow2(stage - 1);

        const areal = reals[n];
        const aimag = imags[n];
        const breal = reals[m];
        const bimag = imags[m];
        const wreal = Math.cos(w / size);
        const wimag = Math.sin(w / size);  // Counterclockwise

        if (stage < numberOfStages) {
          reals[n] = areal + breal;
          imags[n] = aimag + bimag;
          reals[m] = (wreal * (areal - breal)) - (wimag * (aimag - bimag));
          imags[m] = (wreal * (aimag - bimag)) + (wimag * (areal - breal));
        } else {
          reals[n] = areal + breal;
          imags[n] = aimag + bimag;
          reals[m] = areal - breal;
          imags[m] = aimag - bimag;
        }
      }
    }
  }

  for (let stage = 1; stage <= numberOfStages; stage++) {
    const rest = numberOfStages - stage;

    for (let i = 0; i < pow2(stage - 1); i++) {
      indexes[pow2(stage - 1) + i] = indexes[i] + pow2(rest);
    }
  }

  for (let k = 0; k < size; k++) {
    if (indexes[k] <= k) {
      continue;
    }

    const real = reals[indexes[k]];
    const imag = imags[indexes[k]];

    reals[indexes[k]] = reals[k];
    imags[indexes[k]] = imags[k];

    reals[k] = real;
    imags[k] = imag;
  }

  for (let k = 0; k < size; k++) {
    reals[k] /= size;
    imags[k] /= size;
  }
}

LFO (Low Frequency Oscillator)

エフェクターにはいくつかの種類があり, モジュレーション系と呼ばれるエフェクター (コーラス, フランジャー, フェイザー, トレモロ, ワウなど) を実装するためには, 特定のパラメータを時間経過とともに周期的に変化させる必要があります. 具体的には, コーラス / フランジャーは, ディレイタイム (遅延時間) を時間経過とともに周期的に変化させることによって実装可能です. そして, 特定のパラメータを時間経過とともに周期的に変化させる機能が LFO (Low Frequency Oscillator) です.

LFO の実装は Web Audio API に限ったことではないのですが, OscillatorNode を利用して LFO を実装する場合には, Web Audio API 特有のことをもう 1 つ理解している必要があります. それが, AudioParam への接続です.

AudioParam への接続

結論から記載すると, AudioNode の connect メソッドはオーバーロードされており, 第 1 引数には AudioNode インスタンスだけでなく, AudioParam インスタンスを指定することも可能です. すなわち, OscillatorNode の接続先を AudioParam にすることで, 対象のパラメータを時間経過とともに周期的に変化させることが可能になります.

また, LFO のソースとなる OscillatorNode に GainNode を接続することで, パラメータの変化量を調整することが可能になります. 一般的なエフェクターのパラメータの, Depth は GainNode の gain プロパティの値に, Rate は OscillatorNode の frequency プロパティの値と detune プロパティの値に相当しますプロパティの値に相当します.

LFO の実装例 (ビブラート)

LFO と AudioParam への接続, Depth / Rate の制御を具体的に理解するために, 簡易的なビブラートを実装を記載します. (OscillatorNode の frequency プロパティのデフォルト値である) 440 Hz を基準に, Depth で設定した値が Rate の周期で変化することになります. 初期値で言うと, 440 Hz ± 10 Hz の範囲で, frequency プロパティの値が, 1 sec の間に変化することになります.

<button type="button">start</button>
<label for="range-lfo-depth">Depth</label>
<input type="range" id="range-lfo-depth" value="10" min="0" max="50" step="1" />
<span id="print-lfo-depth-value">10</span>
<label for="range-lfo-rate">Rate</label>
<input type="range" id="range-lfo-rate" value="1" min="1" max="10" step="1" />
<span id="print-lfo-rate-value">1</span>

const context = new AudioContext();

let oscillator = null;
let lfo        = null;
let depth      = null;

let depthValue = 10;
let rateValue  = 1;

const buttonElement = document.querySelector('button[type="button"]');

const rangeDepthElement = document.getElementById('range-lfo-depth');
const rangeRateElement  = document.getElementById('range-lfo-rate');

const spanPrintDepthElement = document.getElementById('print-lfo-depth-value');
const spanPrintRateElement  = document.getElementById('print-lfo-rate-value');

buttonElement.addEventListener('mousedown', (event) => {
  if ((oscillator !== null) || (lfo !== null)) {
    return;
  }

  oscillator = new OscillatorNode(context, { frequency: 440 });
  lfo        = new OscillatorNode(context, { frequency: rateValue });
  depth      = new GainNode(context, { gain: depthValue });

  // OscillatorNode (Input) -> AudioDestinationNode (Output)
  oscillator.connect(context.destination);

  // OscillatorNode (LFO) -> GainNode (Depth) -> OscillatorNode.frequency (AudioParam)
  // 440 Hz +- ${depthValue} Hz
  lfo.connect(depth);
  depth.connect(oscillator.frequency);

  // Start immediately
  oscillator.start(0);

  // Start LFO
  lfo.start(0);

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', (event) => {
  if ((oscillator === null) || (lfo === null)) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);
  lfo.stop(0);

  // GC (Garbage Collection)
  oscillator = null;
  lfo        = null;
  depth      = null;

  buttonElement.textContent = 'start';
});

rangeDepthElement.addEventListener('input', (event) => {
  depthValue = event.currentTarget.valueAsNumber;

  if (depth) {
    depth.gain.value = depthValue;
  }

  spanPrintDepthElement.textContent = Math.trunc(depthValue).toString(10);
});

rangeRateElement.addEventListener('input', (event) => {
  rateValue = event.currentTarget.valueAsNumber;

  if (lfo) {
    lfo.frequency.value = rateValue;
  }

  spanPrintRateElement.textContent = Math.trunc(rateValue).toString(10);
});

汎用的な LFO と Depth の制御

基準値と Depth の関係から, パラメータ変化の最小値を考慮しておく必要があるのは, LFO の実装として汎用性に欠けます (先ほどのビブラートの実装だと, 基準値を 27.5 Hz にした場合, Depth の値によっては, 負数の周波数になってしまいます). より汎用的な LFO にするために, パラメータの変化量を直接 Depth に設定するのではなく, 基準値に対する変化割合を格納する変数を追加して, その比率と基準値から実際の Depth を算出します. このような実装にすることで, 基準値に関わらず, Depth の値は 0 から 1 (0 % から 100 %) になるのでより汎用的な実装になります, また, 各 AudioParam のパラメータの値の範囲 (AudioParam の minValue / maxValue プロパティにそれぞれ, 最小値と最大値が設定されています) を意図せずに超えてしまうバグも防ぐことができます.

<button type="button">start</button>
<label for="range-oscillator-frequency">OscillatorNode frequency</label>
<input type="range" id="range-oscillator-frequency" value="440" min="27.5" max="4000" step="0.5" />
<span id="print-oscillator-frequency-value">440</span>
<label for="range-lfo-depth">Depth</label>
<input type="range" id="range-lfo-depth" value="0.1" min="0" max="1" step="0.05" />
<span id="print-lfo-depth-value">10</span>
<label for="range-lfo-rate">Rate</label>
<input type="range" id="range-lfo-rate" value="1" min="1" max="10" step="1" />
<span id="print-lfo-rate-value">1</span>

const context = new AudioContext();

let oscillator = null;
let lfo        = null;
let depth      = null;

let frequency = 440;
let depthRate = 0.1;
let rateValue = 1;

const buttonElement = document.querySelector('button[type="button"]');

const rangeFrequencyElement = document.getElementById('range-oscillator-frequency');
const rangeDepthElement     = document.getElementById('range-lfo-depth');
const rangeRateElement      = document.getElementById('range-lfo-rate');

const spanPrintFrequencyElement = document.getElementById('print-oscillator-frequency-value');
const spanPrintDepthElement     = document.getElementById('print-lfo-depth-value');
const spanPrintRateElement      = document.getElementById('print-lfo-rate-value');

buttonElement.addEventListener('mousedown', (event) => {
  if ((oscillator !== null) || (lfo !== null)) {
    return;
  }

  oscillator = new OscillatorNode(context, { frequency });
  lfo        = new OscillatorNode(context, { frequency: rateValue });
  depth      = new GainNode(context, { gain: oscillator.frequency.value * depthRate });

  // OscillatorNode (Input) -> AudioDestinationNode (Output)
  oscillator.connect(context.destination);

  // OscillatorNode (LFO) -> GainNode (Depth) -> OscillatorNode.frequency (AudioParam)
  lfo.connect(depth);
  depth.connect(oscillator.frequency);

  // Start immediately
  oscillator.start(0);

  // Start LFO
  lfo.start(0);

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', (event) => {
  if ((oscillator === null) || (lfo === null)) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);
  lfo.stop(0);

  // GC (Garbage Collection)
  oscillator = null;
  lfo        = null;
  depth      = null;

  buttonElement.textContent = 'start';
});

rangeFrequencyElement.addEventListener('input', (event) => {
  frequency = event.currentTarget.valueAsNumber;

  if (oscillator && depth) {
    oscillator.frequency.value = frequency;
    depth.gain.value           = oscillator.frequency.value * depthRate;
  }

  spanPrintFrequencyElement.textContent = `${(Math.trunc(frequency * 10) / 10)} Hz`;
});

rangeDepthElement.addEventListener('input', (event) => {
  depthRate = event.currentTarget.valueAsNumber;

  if (oscillator && depth) {
    depth.gain.value = oscillator.frequency.value * depthRate;
  }

  spanPrintDepthElement.textContent = depthRate.toString(10);
});

rangeRateElement.addEventListener('input', (event) => {
  rateValue = event.currentTarget.valueAsNumber;

  if (lfo) {
    lfo.frequency.value = rateValue;
  }

  spanPrintRateElement.textContent = Math.trunc(rateValue).toString(10);
});

ディレイ

ディレイを実装するために必要な処理は, DelayNodeの接続とフィードバックです.

DelayNode

遅延処理を (抽象化して) 実装するために定義されているのが, DelayNode です. コンストラクタの第 2 引数 (DelayOptions の maxDelayTime プロパティ) には (ファクトリメソッドの場合, 第 1 引数), 遅延時間 (ディレイタイム) の最大値を秒単位で指定します. 省略した場合のデフォルト値は 1 sec です.

const context = new AudioContext();

const delay = new DelayNode(context, { maxDelayTime: 5 });  // 5 sec

// If use `createDelay`
// const delay = context.createDelay(5);  // 5 sec

DelayNode インスタンスには, AudioParam である delayTime プロパティが定義されています. これが, 遅延時間 (ディレイタイム) を決定づけるプロパティです. 最小値は 0 sec, 最大値はインスタンス生成時に指定した値 (sec) です.

遅延した音を生成するには, サウンドの入力点となるノード (OscillatorNode など) を DelayNode に接続します.

以下のコードは, サウンド出力点である AudioDestinationNode に対して 2 つの入力ノードが接続されています. 1 つは, 原音を出力するため, そして, もう 1 つは遅延音を出力するためです. このように, 複数のノードを入力ノードとして接続することで, それぞれ入力された音をミックスすることが可能になります. これは, ディレイだけではなく他のエフェクターを実装する場合においても, 原音とエフェクト音をミックスするという処理は必要になります.

const context = new AudioContext();

const delay = new DelayNode(context);

// If use `createDelay`
// const delay = context.createDelay();

delay.delayTime.value = 0.5;

const oscillator = new OscillatorNode(context);

// Connect nodes for original sound
// OscillatorNode (Input) -> AudioDestinationNode (Output)
oscillator.connect(context.destination);

// Connect nodes for delay sound
// OscillatorNode (Input) -> DelayNode (Delay) -> AudioDestinationNode (Output)
oscillator.connect(delay);
delay.connect(context.destination);

oscillator.start(0);
oscillator.stop(context.currentTime + 2);

これで, ディレイが実装できました ... と言いたいところですが, このコードでは, エフェクターとしてのディレイは実現できていません. エフェクターとしてのという意味は, 上記のコードでも遅延した音は発生します. しかしながら, やまびこ現象のように, 遅延音が少しずつ減衰しながら何度も繰り返し生成することが実装できていません.

Web Audio API の設計思想からの観点で説明すると, DelayNode は, 指定された遅延時間で遅延音を 1 つだけ生成することだからです. すなわち, エフェクターのディレイを実現するという役割までは担いません.

そこで, エフェクターとしてのディレイを実装するには, DelayNode の接続と次のセクションで解説するフィードバックという処理が必要になります.

const context = new AudioContext();

const delay = new DelayNode(context);

// If use `createDelay`
// const delay = context.createDelay();

delay.delayTime.value = 0.5;

const feedback = new GainNode(context, { gain: 0.5 });

const oscillator = new OscillatorNode(context);

// Connect nodes for original sound
// OscillatorNode (Input) -> AudioDestinationNode (Output)
oscillator.connect(context.destination);

// Connect nodes for delay sound
// OscillatorNode (Input) -> DelayNode (Delay) -> AudioDestinationNode (Output)
oscillator.connect(delay);
delay.connect(context.destination);

// Connect nodes for feedback
// (OscillatorNode (Input) ->) DelayNode (Delay) -> GainNode (Feedback) -> DelayNode (Delay) -> GainNode (Feedback) -> ...
delay.connect(feedback);
feedback.connect(delay);

oscillator.start(0);
oscillator.stop(context.currentTime + 2);

const context = new AudioContext();

const delay = new DelayNode(context, { delayTime: 0.5 });

// If use `createDelay`
// const delay = context.createDelay();
// delay.delayTime.value = 0.5;

const dry      = new GainNode(context, { gain: 0.7 });  // for gain of original sound
const wet      = new GainNode(context, { gain: 0.3 });  // for gain of delay sound
const feedback = new GainNode(context, { gain: 0.5 });  // for feedback

const oscillator = new OscillatorNode(context);

// Connect nodes for original sound
// OscillatorNode (Input) -> GainNode (Dry) -> AudioDestinationNode (Output)
oscillator.connect(dry);
dry.connect(context.destination);

// Connect nodes for delay sound
// OscillatorNode (Input) -> DelayNode (Delay) -> GainNode (Wet) -> AudioDestinationNode (Output)
oscillator.connect(delay);
delay.connect(wet);
wet.connect(context.destination);

// Connect nodes for feedback
// (OscillatorNode (Input) ->) DelayNode (Delay) -> GainNode (Feedback) -> DelayNode (Delay) -> GainNode (Feedback) -> ...
delay.connect(feedback);
feedback.connect(delay);

oscillator.start(0);
oscillator.stop(context.currentTime + 2);

リバーブ

簡易的なリバーブであれば, ディレイのパラメータを適切に設定することで実装することは可能です. しかしながら, 現実世界のエフェクターのリバーブは, ディレイと実装は異なり, シミュレートしたい音響空間のインパルス応答 (RIR: Room Impulse Response) と呼ばれるオーディオデータを利用します. インパルス応答の詳細に関しては, 後半のセクションで解説しますので, とりあえず, リバーブを実装してみましょう.

ConvolverNode

インパルス応答のオーディオデータをエフェクターとして利用するには, ConvolverNode を利用します. ConvolverNode は, コンボリューション積分 (畳み込み積分, 合成積) という数学的な演算を抽象化する AudioNode です (デジタルフィルタの視点では, FIR フィルタを抽象化します. のちほど解説しますが, 見立ての違いであり, 本質的には, コンボリューション積分も FIR フィルタも同じです. コンボリューション積分も FIR フィルタも次のセクション以降で解説しています).

const context = new AudioContext();

const convolver = new ConvolverNode(context);

// If use `createConvolver`
// const convolver = context.createConvolver();

ConvolverNode には, buffer プロパティが定義されており, この buffer プロパティに, インパルス応答 (RIR) のオーディオデータの AudioBuffer インスタンスを設定します (コンストラクタ生成であれば, ConvolverOptions の buffer プロパティで設定することも可能です).

AudioBuffer インスタンスの生成は, ワンショットオーディオと同じです.

const context = new AudioContext();

fetch('./assets/rirs/rir.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then((arrayBuffer) => {
    const successCallback = (audioBuffer) => {
      const convolver = new ConvolverNode(context);

      // If use `ConvolverOptions`
      // const convolver = new ConvolverNode(context, { buffer: audioBuffer });

      // If use `createConvolver`
      // const convolver = context.createConvolver();

      convolver.buffer = audioBuffer;
    };

    const errorCallback = (error) => {
      // error handling
    };

    context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
  })
  .catch((error) => {
    // error handling
  });

サウンドの入力点となるノード (OscillatorNode など) を ConvolverNode に接続して, ConvolverNode を AudioDestinationNode に接続します.

const context = new AudioContext();

fetch('./assets/rirs/rir.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then((arrayBuffer) => {
    const successCallback = (audioBuffer) => {
      const convolver = new ConvolverNode(context);

      // If use `ConvolverOptions`
      // const convolver = new ConvolverNode(context, { buffer: audioBuffer });

      // If use `createConvolver`
      // const convolver = context.createConvolver();

      convolver.buffer = audioBuffer;

      const dry = new GainNode(context, { gain: 0.6 });  // for gain of original sound
      const wet = new GainNode(context, { gain: 0.4 });  // for gain of reverb sound

      const oscillator = new OscillatorNode(context);

      // Connect nodes for original sound
      // OscillatorNode (Input) -> GainNode (Dry) -> AudioDestinationNode (Output)
      oscillator.connect(dry);
      dry.connect(context.destination);

      // Connect nodes for reverb sound
      // OscillatorNode (Input) -> ConvolverNode (Reverb) -> GainNode (Wet) -> AudioDestinationNode (Output)
      oscillator.connect(convolver);
      convolver.connect(wet);
      wet.connect(context.destination);

      oscillator.start(0);
      oscillator.stop(context.currentTime + 5);
    };

    const errorCallback = (error) => {
      // error handling
    };

    context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
  })
  .catch((error) => {
    // error handling
  });

ディレイの場合と同じように, 原音とエフェクト音の接続, そして, Dry / Wet の GainNode も接続しています. 遅延音の生成処理と遅延音に対する演算処理は, ConvolverNode が抽象化しているので, フィードバックのための接続は不要です.

以上で, リバーブが完成しました. ところで, リバーブを利用するためには, インパルス応答 (RIR) のオーディオファイルが必要です. 楽曲やワンショットオーディオファイルはあっても, インパルス応答のオーディオデータをもっている人は少ないと思います. 機材をもっていれば実際に測定するのも可能ですが, そこまでするのはちょっとめんどうです. となると, Web 上で公開されているファイルを利用することになるのですが, 利用条件や著作権の関係から無償で自由に利用できるのは意外とありません. とりあえず, 1 つ紹介するのは, Concert Hall Impulse Responses - Pori, Finland です. readme.txt の 5. Copyright のセクションに, 「The data are provided free for noncommercial purposes, provided the authors are cited when the data are used in any research application.」と記載されているので, 非商用利用であれば, 自身が開発されている Web アプリケーションに利用しても問題なさそうです.

インパルス応答

インパルス応答を理解するには, まずは, インパルス音について理解する必要があります. インパルス音とは, ごく短時間において瞬間的に発生する音です. 具体的には, ピストルの音や風船が破裂するときの音がインパルス音と言えるでしょう. インパルス音のイメージは以下のグラフのようになります. このような物理現象を数式でモデリングするための最適な関数が, デルタ関数です.

以下は, デルタ関数の定義です. デルタ関数は, $t = t_{r}$ において, 横幅が $\lim_{\mathrm{w}\to 0}$, 高さが $\lim_{\mathrm{h}\to \infty}$ となる関数 (数学での関数をより一般化した, 超関数に分類されます) なので, 無限の区間において積分すると, その値 (つまり, 面積) が 1 となります.

$ \begin{flalign} &\delta\left(t - t_{r}\right)dt = \begin{cases} \infty & (\mathrm{if} \quad t = t_{r}) \\ 0 & (\mathrm{if} \quad t \neq t_{r}) \end{cases} \end{flalign} $

$ \begin{flalign} &\int_{-\infty}^{\infty}\delta\left(t - t_{r}\right)dt = 1 \\ \end{flalign} $

インパルス音を室内で発生させると, 音が天井や壁などに反射して, 音の響き, すなわち, 残響が発生します. カラオケが好きなかたであれば, エコーのような効果と考えてもよいでしょう.

これが, インパルス応答です. つまり, インパルス音を音響空間に対する入力としたときの出力 (応答) ということです. そして, その出力が音響空間における, 残響特性を表すことになるので, インパルス応答を利用することによって, コンサートホールなどの音響空間の音の響きをシミュレートするエフェクターであるリバーブが実現できるというわけです. ちなみに, 室内でのインパルス応答をシミュレートする事が多いので, RIR (Room Impulse Response) と表現されることもあります.

また, この残響が, ディレイにおけるフィードバックと類似した音響効果を発生させることになります (フィードバックのアニメーションとインパルス応答のアニメーションが類似していることに気付いたかもしれません).

イメージでインパルス応答は理解できるかと思いますが, それをコンピュータで実現する場合, 数式でモデリングできる必要があります. ConvolverNode の命名 (Convolve: 畳み込む) が表すように, その演算処理がコンボリューション積分 (畳み込み積分, 合成積) です. 言い換えると, ConvolverNode は, コンボリューション積分を抽象化した AudioNode です.

コンボリューション積分

コンボリューション積分とは, 以下の数式で定義されるように, 信号の遅延と乗算, それらの無限区間の積分によって構成されています. $x\left(t\right)$ は入力信号, $y\left(t\right)$ は出力信号, $h\left(t_{r}\right)$ は, インパルス応答の信号 (ConvolverNode の buffer プロパティに設定する, AudioBuffer のオーディオデータと考えてもよいでしょう) です.

コンピュータでは, 連続信号をあつかうことはできないので, サンプリングされた離散信号の遅延と乗算, それらの加算となります. また, 無限の加算はできないので, 有界な値 (サンプル数) $N$ となります.

具体的に理解するために, $N = 5$ として, 展開してみます.

理解しやすいように, 入力信号 $x\left(n\right)$ は, 振幅が 1 のパルス列とします. また, 出力信号の実際の値を算出するために, インパルス応答の信号は, 以下の値とします.

これらの信号のコンボリューション積分をイラストにすると, 以下のようなグラフになります.

上部が入力信号のパルス列 ($x\left(n\right)$), 中央がインパルス応答 ($h\left(m\right)$), 下部がコンボリューション積分結果の出力信号 ($y\left(n\right)$) となります. 出力信号の振幅のみスケールが異なることに注意してください. ここで, $n = 3$ に相当する時刻までの値を, 先ほどの展開したコンボリューション積分に適用して実際の値を算出すると,

負数に相当する時刻は, 振幅が 0 とみなせるので, $n \geq 0$ の項のみ記述すると,

また, 入力信号は, 振幅 1 のパルス列なので, $x\left(n\right) = 1$ となるので,

最後に, $h\left(m\right)$ の実際の値を適用すれば, 出力信号 $y\left(n\right)$ の $n = 3$ までの値が算出できます.

目視レベルではありますが, グラフで表示されている出力信号と (大きく) 値の相違がないことが確認できます. 計算結果を抽象化すると, コンボリューション積分で生成された出力信号は, 現在の時刻の信号だけではなく, 過去の信号の影響も受けるということですということです (逆に, それを, 厳密に数式で定義したのがコンボリューション積分と言えます).

入力信号やインパルス応答が, 現実世界のようにより複雑になると, 計算自体も複雑になりますが, コンボリューション積分がどうのような演算か, そして, ConvolverNode が抽象化している演算のイメージを理解するのに役立てばと思います.

もっとも, 数学・物理的に理解しようとすると少し難しく感じるかもしれませんが, プログラミング言語で実装すれば, 2 重ループと積和演算で構成される単純な処理です.

// コンボリューション積分のコード片

const x = new Float32Array(2400);
const h = new Float32Array(1200);
const y = new Float32Array(2400);

// 入力信号
for (let n = 0; n < x.length; n++) {
  x[n] = Math.sin((2 * Math.PI * n * 2) / 1200);
}

// インパルス応答
for (let m = 0; m < h.length; m++) {
  h[m] = 0.5 * Math.exp(-m);
}

// 出力信号
for (let n = 0; n < x.length; n++) {
  for (let m = 0; m < h.length; m++) {
    if ((n - m) >= 0) {
      y[n] += (x[n - m] * h[m]);
    }
  }
}

FIR フィルタ

デジタルフィルタを数学的な厳密性まで含めて解説すると, それだけで 1 冊の書籍になるぐらいの解説になるので, FIR フィルタをディレイ・リバーブの観点で解説します.

FIR フィルタ (Finite Impulse Response filter) は, 以下の数式で定義されるデジタルフィルタです.

数式的には, コンボリューション積分と同じです. すなわち, 見立ての違いでしかありません. 数学的にはコンボリューション積分, 工学的には FIR フィルタと表現しています. 言い換えると, コンボリューション積分を実装に落とし込んだのが FIR フィルタということです.

具体的に, $N = 3$ (乗算器の数 $N + 1$) の加算器・乗算器・遅延器の要素を利用してブロック図として表現します (遅延器の $z^{-1}$ の表記は $z$ 変換に由来しますが, ブロック図としては, 1 サンプル分遅延させる要素 (素子) の理解で問題ありません).

FIR フィルタの図から, 逆に, コンボリューション積分の数式を導出することが可能なこともわかります.

乗算器の数 (遅延器の数もそれに比例) と係数は, ディレイは制御可能なパラメータで決定できますが, リバーブは室内の特性によって決定されます. すなわち, 乗算器の数と係数の算出がディレイとリバーブの実装に違いに表れます. ディレイは遅延時間とフィードバックよって乗算器の数と係数を決定するのに対して, リバーブはインパルス応答 (RIR) のオーディオデータから乗算器の数と係数が決定されます.

コーラス

コーラスは, ディレイタイムを周期的に変化させたエフェクト音を原音とミックスすることにより実装できます. ディレイタイムを周期的に変化させることが実装のポイントになりますが, ここで LFO を利用することで, ディレイタイムを周期的に変化させることができます. つまり, Web Audio API においては, LFO の接続先を DelayNode の AudioParam である delayTime プロパティに接続すれば実装完了です.

まず, 原音の出力の接続と, エフェクト音の出力の接続 (DelayNode の接続) のみを実装します.

const context = new AudioContext();

const delay = new DelayNode(context, { delayTime: 0.02 });

const oscillator = new OscillatorNode(context);

// Connect nodes for original sound
// OscillatorNode (Input) -> AudioDestinationNode (Output)
oscillator.connect(context.destination);

// Connect nodes for delay sound
// OscillatorNode (Input) -> DelayNode (Delay) -> AudioDestinationNode (Output)
oscillator.connect(delay);
delay.connect(context.destination);

oscillator.start(0);
oscillator.stop(context.currentTime + 2);

そして, LFO の実装で解説したように, LFO のための OscillatorNode インスタンスと GainNode インスタンス (Depth パラメータ) を生成して, DelayNode の delayTime プロパティ に接続します.

const context = new AudioContext();

const baseDelayTime = 0.020;
const depthValue    = 0.005;
const rateValue     = 1;

const delay = new DelayNode(context, { delayTime: baseDelayTime });

const oscillator = new OscillatorNode(context);

const lfo   = new OscillatorNode(context, { frequency: rateValue });
const depth = new GainNode(context, { gain: depthValue });

// Connect nodes for original sound
// OscillatorNode (Input) -> AudioDestinationNode (Output)
oscillator.connect(context.destination);

// Connect nodes for delay sound
// OscillatorNode (Input) -> DelayNode (Delay) -> AudioDestinationNode (Output)
oscillator.connect(delay);
delay.connect(context.destination);

// Connect nodes for LFO that changes delay time periodically
// OscillatorNode (LFO) -> GainNode (Depth) -> delayTime (AudioParam)
lfo.connect(depth);
depth.connect(delay.delayTime);

// Start oscillator and LFO
oscillator.start(0);
lfo.start(0);

// Stop oscillator and LFO
oscillator.stop(context.currentTime + 5);
lfo.stop(context.currentTime + 5);

ディレイのノード接続からフィードバックを除いて, LFO を DelayNode の delayTime プロパティ (AudioParam) に接続したノード接続と同じです. パラメータに関しては, コーラスの場合, 基準となるディレイタイムを 20 - 30 msec にして, ± 5 ~ 10 msec, Rate はゆっくりと 1 Hz ぐらいがよいでしょう. (もっとも, 実際のプロダクトでは, ある程度自由度高く設定できるように, 汎用的な LFO になるように実装することになるでしょう).

コーラスの原理的な実装としてはこれで完了ですが, エフェクターとしてはまだコーラスっぽくありません. 原音とエフェクト音が同じゲインで合成されているので, 原音とエフェクト音が別々に出力されているように聴こえると思います. 原音が少し揺れているぐらいにエフェクト音を合成するとコーラスらしくなるので, Dry / Wet のための GainNode を接続して, 原音とエフェクト音のゲインを調整します.

const context = new AudioContext();

const baseDelayTime = 0.020;
const depthValue    = 0.005;
const rateValue     = 1;

const delay = new DelayNode(context, { delayTime: baseDelayTime });

const oscillator = new OscillatorNode(context);

const lfo   = new OscillatorNode(context, { frequency: rateValue });
const depth = new GainNode(context, { gain: depthValue });

const dry = new GainNode(context, { gain: 0.7 });  // for gain of original sound
const wet = new GainNode(context, { gain: 0.3 });  // for gain of chorus sound

// Connect nodes for original sound
// OscillatorNode (Input) -> GainNode (Dry) -> AudioDestinationNode (Output)
oscillator.connect(dry);
dry.connect(context.destination);

// Connect nodes for delay sound
// OscillatorNode (Input) -> DelayNode (Delay) -> GainNode (Wet) -> AudioDestinationNode (Output)
oscillator.connect(delay);
delay.connect(wet);
wet.connect(context.destination);

// Connect nodes for LFO that changes delay time periodically
// OscillatorNode (LFO) -> GainNode (Depth) -> delayTime (AudioParam)
lfo.connect(depth);
depth.connect(delay.delayTime);

// Start oscillator and LFO
oscillator.start(0);
lfo.start(0);

// Stop oscillator and LFO
oscillator.stop(context.currentTime + 5);
lfo.stop(context.currentTime + 5);

以上で, コーラスの実装は完了です. ハードコーディングしているパラメータが多いので, ある程度実際のアプリケーションを想定して, UI からパラメータ設定を可能にすると以下のようなコードとなるでしょう (Dry / Wet は同時に設定する Mix としています).

<button type="button">start</button>
<label for="range-chorus-delay-time">Delay time</label>
<input type="range" id="range-chorus-delay-time" value="0" min="0" max="50" step="1" />
<span id="print-chorus-delay-time-value">0 msec</span>
<label for="range-chorus-depth">Depth</label>
<input type="range" id="range-chorus-depth" value="0" min="0" max="1" step="0.05" />
<span id="print-chorus-depth-value">0</span>
<label for="range-chorus-rate">Rate</label>
<input type="range" id="range-chorus-rate" value="0" min="0" max="1" step="0.05" />
<span id="print-chorus-rate-value">0</span>
<label for="range-chorus-mix">Mix</label>
<input type="range" id="range-chorus-mix" value="0" min="0" max="1" step="0.05" />
<span id="print-chorus-mix-value">0</span>

const context = new AudioContext();

let oscillator = null;
let lfo        = null;

let depthRate  = 0;
let rateValue  = 0;
let mixValue   = 0;

const delay = new DelayNode(context);
const depth = new GainNode(context, { gain: delay.delayTime.value * depthRate });
const dry   = new GainNode(context, { gain: 1 - mixValue });
const wet   = new GainNode(context, { gain: mixValue });

const buttonElement = document.querySelector('button[type="button"]');

const rangeDelayTimeElement = document.getElementById('range-chorus-delay-time');
const rangeDepthElement     = document.getElementById('range-chorus-depth');
const rangeRateElement      = document.getElementById('range-chorus-rate');
const rangeMixElement       = document.getElementById('range-chorus-mix');

const spanPrintDelayTimeElement = document.getElementById('print-chorus-delay-time-value');
const spanPrintDepthElement     = document.getElementById('print-chorus-depth-value');
const spanPrintRateElement      = document.getElementById('print-chorus-rate-value');
const spanPrintMixElement       = document.getElementById('print-chorus-mix-value');

buttonElement.addEventListener('mousedown', (event) => {
  if ((oscillator !== null) || (lfo !== null)) {
    return;
  }

  oscillator = new OscillatorNode(context);
  lfo        = new OscillatorNode(context, { frequency: rateValue });

  // Connect nodes for original sound
  // OscillatorNode (Input) -> GainNode (Dry) -> AudioDestinationNode (Output)
  oscillator.connect(dry);
  dry.connect(context.destination);

  // Connect nodes for delay sound
  // OscillatorNode (Input) -> DelayNode (Delay) -> GainNode (Wet) -> AudioDestinationNode (Output)
  oscillator.connect(delay);
  delay.connect(wet);
  wet.connect(context.destination);

  // Connect nodes for LFO that changes delay time periodically
  // OscillatorNode (LFO) -> GainNode (Depth) -> delayTime (AudioParam)
  lfo.connect(depth);
  depth.connect(delay.delayTime);

  // Start oscillator and LFO immediately
  oscillator.start(0);
  lfo.start(0);

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', (event) => {
  if ((oscillator === null) || (lfo === null)) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);
  lfo.stop(0);

  // GC (Garbage Collection)
  oscillator = null;
  lfo        = null;

  buttonElement.textContent = 'start';
});

rangeDelayTimeElement.addEventListener('input', (event) => {
  delay.delayTime.value = event.currentTarget.valueAsNumber * 0.001;
  depth.gain.value      = delay.delayTime.value * depthRate;

  spanPrintDelayTimeElement.textContent = `${Math.trunc(delay.delayTime.value * 1000)} msec`;
});

rangeDepthElement.addEventListener('input', (event) => {
  depthRate = event.currentTarget.valueAsNumber;

  depth.gain.value = delay.delayTime.value * depthRate;

  spanPrintDepthElement.textContent = depthRate.toString(10);
});

rangeRateElement.addEventListener('input', (event) => {
  rateValue = event.currentTarget.valueAsNumber;

  if (lfo) {
    lfo.frequency.value = rateValue;
  }

  spanPrintRateElement.textContent = rateValue.toString(10);
});

rangeMixElement.addEventListener('input', (event) => {
  mixValue = event.currentTarget.valueAsNumber;

  dry.gain.value = 1 - mixValue;
  wet.gain.value = mixValue;

  spanPrintMixElement.textContent = mixValue.toString(10);
});

フランジャー

フランジャーは, コーラスの実装にエフェクト音のフィードバックの接続を追加するだけです (ディレイの実装に LFO を追加して, ディレイタイムを周期的に変化させるとも言えます). つまり, コーラスの実装をより汎用的にした実装となります. パラメータしだいで, フランジャーになり, コーラスにもなります. 原理的には, 同じなのでこのあたりの区別は, 音楽的な感覚による違いでしかありません.

<button type="button">start</button>
<label for="range-flanger-delay-time">Delay time</label>
<input type="range" id="range-flanger-delay-time" value="0" min="0" max="50" step="1" />
<span id="print-flanger-delay-time-value">0 msec</span>
<label for="range-flanger-depth">Depth</label>
<input type="range" id="range-flanger-depth" value="0" min="0" max="1" step="0.05" />
<span id="print-flanger-depth-value">0</span>
<label for="range-flanger-rate">Rate</label>
<input type="range" id="range-flanger-rate" value="0" min="0" max="10" step="0.5" />
<span id="print-flanger-rate-value">0</span>
<label for="range-flanger-mix">Mix</label>
<input type="range" id="range-flanger-mix" value="0" min="0" max="1" step="0.05" />
<span id="print-flanger-mix-value">0</span>
<label for="range-flanger-feedback">Mix</label>
<input type="range" id="range-flanger-feedback" value="0" min="0" max="0.9" step="0.05" />
<span id="print-flanger-feedback-value">0</span>

const context = new AudioContext();

let oscillator = null;
let lfo        = null;

let depthRate  = 0;
let rateValue  = 0;
let mixValue   = 0;

const delay    = new DelayNode(context);
const depth    = new GainNode(context, { gain: delay.delayTime.value * depthRate });
const dry      = new GainNode(context, { gain: 1 - mixValue });
const wet      = new GainNode(context, { gain: mixValue });
const feedback = new GainNode(context, { gain: 0 });

const buttonElement = document.querySelector('button[type="button"]');

const rangeDelayTimeElement = document.getElementById('range-flanger-delay-time');
const rangeDepthElement     = document.getElementById('range-flanger-depth');
const rangeRateElement      = document.getElementById('range-flanger-rate');
const rangeMixElement       = document.getElementById('range-flanger-mix');
const rangeFeedbackElement  = document.getElementById('range-flanger-feedback');

const spanPrintDelayTimeElement = document.getElementById('print-flanger-delay-time-value');
const spanPrintDepthElement     = document.getElementById('print-flanger-depth-value');
const spanPrintRateElement      = document.getElementById('print-flanger-rate-value');
const spanPrintMixElement       = document.getElementById('print-flanger-mix-value');
const spanPrintFeedbackElement  = document.getElementById('print-flanger-feedback-value');

buttonElement.addEventListener('mousedown', (event) => {
  if ((oscillator !== null) || (lfo !== null)) {
    return;
  }

  oscillator = new OscillatorNode(context);
  lfo        = new OscillatorNode(context, { frequency: rateValue });

  // Connect nodes for original sound
  // OscillatorNode (Input) -> GainNode (Dry) -> AudioDestinationNode (Output)
  oscillator.connect(dry);
  dry.connect(context.destination);

  // Connect nodes for delay sound
  // OscillatorNode (Input) -> DelayNode (Delay) -> GainNode (Wet) -> AudioDestinationNode (Output)
  oscillator.connect(delay);
  delay.connect(wet);
  wet.connect(context.destination);

  // Connect nodes for feedback
  // (OscillatorNode (Input) ->) DelayNode (Delay) -> GainNode (Feedback) -> DelayNode (Delay) -> GainNode (Feedback) -> ...
  delay.connect(feedback);
  feedback.connect(delay);

  // Connect nodes for LFO that changes delay time periodically
  // OscillatorNode (LFO) -> GainNode (Depth) -> delayTime (AudioParam)
  lfo.connect(depth);
  depth.connect(delay.delayTime);

  // Start oscillator and LFO immediately
  oscillator.start(0);
  lfo.start(0);

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', (event) => {
  if ((oscillator === null) || (lfo === null)) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);
  lfo.stop(0);

  // GC (Garbage Collection)
  oscillator = null;
  lfo        = null;

  buttonElement.textContent = 'start';
});

rangeDelayTimeElement.addEventListener('input', (event) => {
  delay.delayTime.value = event.currentTarget.valueAsNumber * 0.001;
  depth.gain.value      = delay.delayTime.value * depthRate;

  spanPrintDelayTimeElement.textContent = `${Math.trunc(delay.delayTime.value * 1000)} msec`;
});

rangeDepthElement.addEventListener('input', (event) => {
  depthRate = event.currentTarget.valueAsNumber;

  depth.gain.value = delay.delayTime.value * depthRate;

  spanPrintDepthElement.textContent = depthRate.toString(10);
});

rangeRateElement.addEventListener('input', (event) => {
  rateValue = event.currentTarget.valueAsNumber;

  if (lfo) {
    lfo.frequency.value = rateValue;
  }

  spanPrintRateElement.textContent = rateValue.toString(10);
});

rangeMixElement.addEventListener('input', (event) => {
  mixValue = event.currentTarget.valueAsNumber;

  dry.gain.value = 1 - mixValue;
  wet.gain.value = mixValue;

  spanPrintMixElement.textContent = mixValue.toString(10);
});

rangeFeedbackElement.addEventListener('input', (event) => {
  const feedbackValue = event.currentTarget.valueAsNumber;

  feedback.gain.value = feedbackValue;

  spanPrintFeedbackElement.textContent = feedbackValue.toString(10);
});

ディレイタイムの周期的な変化とFM 変調

FM 変調 (Frequency Modulation) とは, 時間の経過とともに信号の周波数を変化させることです.

コーラス・フランジャーは, 結果的に FM 変調を発生させていると解説しましたが, これに対して疑問に思うことがあるかもしれません. 周波数を周期的に変化させるために, なぜ, ディレイタイムを周期的に変化させているのかということです (ディレイタイムの周期的な変化が原理となっているかということです) LFO の実装例で解説したように, 直接的に周波数を周期的に変化させればよいはずです. しかしながら, 基本波形のように, 基本周波数が明確な場合はそれで問題ないのですが, アンサンブル (つまり, 楽曲) や音声において, 一般的に, 基本周波数を (精度高く) 推定するアルゴリズムは複雑になりますし, それにともなって計算量も多くなります (ちなみに, $f_{0}$ 推定などと呼ばれます). つまり, 汎用的なコーラス・フランジャーを実装するとなると, 直接的に周波数を変化させることは難しくなります.

ここで, コンボリューション積分とフーリエ変換の性質から, 時間領域における遅延は, 周波数領域においては周波数成分の変化となります (数学的な詳細を知る必要はないですが, 巡回畳み込みのセクションが参考になると思います). すなわち, 時間領域においてディレイタイムを周期的に変化させることは, 周波数領域において各周波数成分を周期的に変化させることとなり, 結果として (汎用的な) FM 変調となります.

ちなみに, すでにサンプルコードを実行して気づいたかもしれませんが, コーラス・フランジャーで, エフェクト音のみの出力にした場合, ビブラートとなります. ビブラートはまさに FM 変調であり, 言い換えれば, コーラス・フランジャーは, ビブラートをベースにしたエフェクターであり, 汎用的な実装とパラメータ設定でビブラートにすることも可能ということです.

位相

位相とは, 時間領域における波の位置のことです (数学的には, ある時刻の複素数平面における偏角と考えることもできます). したがって, 周期性をもつ波の場合, 位相はその周期内の値だけを考慮すれば事足ります (正弦波の場合, $\sin\theta = \sin\left(\theta + 2\pi\right) = \sin\left(\theta + 4\pi\right) = \cdots = \sin\left(\theta + 2n\pi\right)$ となるので, $2\pi$ の区間の位相を考慮すればよいことになります). また, 正弦波と余弦波は位相の違いでしかありません ($\sin\theta = \cos\left(\theta - \frac{\pi}{2}\right)$. これは, 位相で考えなくても, 加法定理で数式から導出できることでもあります).

位相と周期性から, 位相の変化をイメージすると, 横軸を位相 (単位は radian: ラジアン) としたときに, 以下のような変化になります.

正弦波の場合, $\frac{\pi}{2}$ シフトすると反転した余弦波, $\pi$ シフトすると反転した自身の波 (反転した正弦波), $\frac{3\pi}{2}$ シフトすると余弦波, $2\pi$ シフトすると元の正弦波に戻ります.

フェイザーの原理を理解するうえで, この位相変化のイメージは重要になるのでおさえておいてください.

All-Pass Filter

フェイザーは, 位相を変化させる周波数帯域を周期的に変化させて, 原音と合成して音を干渉させることによって実装できます. つまり, 位相を変化させることがフェイザーにとって重要な処理となりますが, All-Pass Filter を使うことで, 対象の周波数成分の位相を変化させることができます (他のフィルタと異なり, すべての周波数成分のゲイン (振幅) を変化させずに通過させるので, オールパスという名前がついています).

Web Audio API では, BiquadFilterNode インスタンスの type プロパティに 'allpass' を設定することで, 簡単に All-Pass Filter を使うことができます.

const context = new AudioContext();

const oscillator = new OscillatorNode(context, { type: 'sawtooth' });
const allpass    = new BiquadFilterNode(context, { type: 'allpass', frequency: 880 });

oscillator.connect(allpass);
allpass.connect(context.destination);

oscillator.start(0);
oscillator.stop(context.currentTime + 2);

位相変化と干渉

ところで, All-Pass Filter を通過させた音, つまり, 位相を変化させただけの音というのは, 特に変化を知覚することはできません. スペクトルのセクションでも記載しましたが, 人間の聴覚というのは位相の違いには鈍感だからです. では, なぜ, フェイザーはエフェクトとして知覚することができるのでしょうか ?

フェイザーは, 位相の変化を知覚しているのではなく, 位相を変化させたエフェクト音と原音を合成することで音波を干渉させて, 結果として発生する, 振幅の増減やうねりを知覚しているからです.

上記の正弦波で説明すると, 開始時刻において, 原音とエフェクト音 (ともに, 半透明の青色の波) は, 同じ位相にあります. ここで, $\theta = \frac{\pi}{2}$ の位相の点に着目すると, 同じ位相なので, 音波が重なり, 合成された結果, 出力音 (マゼンタ色の波) は $0.5 \cdot \sin\left(\frac{\pi}{2}\right) + 0.5 \cdot \sin\left(\frac{\pi}{2}\right) = 1$ となって振幅が増幅します. エフェクト音の位相を $\frac{\pi}{2}$ ずらすと, 反転した余弦波となり, 位相 $\theta = \frac{\pi}{2}$ でのエフェクト音は $-0.5 \cdot \cos\left(\frac{\pi}{2}\right) = 0$ となるので, 合成された結果, 出力音の振幅値は, $0.5 \cdot \sin\left(\frac{\pi}{2}\right) - 0.5\cdot \cos\left(\frac{\pi}{2}\right) = 0.5$ となります. さらに, エフェクト音の位相を $\frac{\pi}{2}$ (開始時刻を基準にすると, $\pi$) ずらすと, 反転した正弦波となり, 位相 $\theta = \frac{\pi}{2}$ でのエフェクト音は $-0.5 \cdot \sin\left(\frac{\pi}{2}\right) = -0.5$ となるので, 合成された結果の振幅値は, $0.5 \cdot \sin\left(\frac{\pi}{2}\right) - 0.5 \cdot \sin\left(\frac{\pi}{2}\right) = 0$ となります (位相 $\theta = \frac{\pi}{2}$ に限らず, 反転した正弦波と合成するので, すべての位相においてその振幅は 0 であり, すなわち, 無音となります). そして, エフェクト音の位相を 1 周期分, つまり, $2\pi$ ずらすと, エフェクト音は再び元の位相に戻るので, 開始時刻と同様の出力音となります.

周期関数なので, 1 周期分以上の位相の変化 ($2\pi$ 以上の位相の変化) においては, 同様の振幅の増減の現象が繰り返し発生します.

このように, 複数の音波を合成した結果, 生じる振幅の増減現象を干渉と呼びます (実は, これまでも, エフェクターの解説で実装した, 原音とエフェクト音を合成する処理というのも, 物理的な視点では, 音波の干渉です. 音楽的には, このような音を重ねる処理を, 合成, あるいは, ミキシングと呼ぶので, 合成という用語を優先して使いました).

また, 位相がわずかに異なる時点で音波を重ねることをうねり (うなりとも呼びます) と呼び, 音楽的な効果が高いことが知られています (同様に, 周波数をわずかにずらした音波を重ねた場合でもうねり現象は発生します. 実は, これが原始的なコーラスでもあります).

したがって, 位相を変化させたエフェクト音と原音を合成するような AudioNode の接続を実装すると以下のようになります.

const context = new AudioContext();

const oscillator = new OscillatorNode(context, { type: 'sawtooth' });
const allpass    = new BiquadFilterNode(context, { type: 'allpass', frequency: 880 });

// Connect nodes for original sound
// OscillatorNode (Input) -> AudioDestinationNode (Output)
oscillator.connect(context.destination);

// Connect nodes for shifting phase
// OscillatorNode (Input) -> BiquadFilterNode (All-Pass Filter) -> AudioDestinationNode (Output)
oscillator.connect(allpass);
allpass.connect(context.destination);

oscillator.start(0);
oscillator.stop(context.currentTime + 2);

ところが, この実装では, 位相を変化する周波数成分が固定されたままなので, 干渉による振幅の増減変化が知覚できるほど発生しないので, フェイザーとして聴こえません. 位相変化させる周波数成分を周期的に変化させるように, LFO を All-Pass Filter の frequency プロパティ (AudioParam) に接続します.

const context = new AudioContext();

const baseFrequency = 880;
const depthValue    = 220;
const rateValue     = 1;

const oscillator = new OscillatorNode(context, { type: 'sawtooth' });
const allpass    = new BiquadFilterNode(context, { type: 'allpass', frequency: baseFrequency });

const lfo   = new OscillatorNode(context, { frequency: rateValue });
const depth = new GainNode(context, { gain: depthValue });

// Connect nodes for original sound
// OscillatorNode (Input) -> AudioDestinationNode (Output)
oscillator.connect(context.destination);

// Connect nodes for shifting phase
// OscillatorNode (Input) -> BiquadFilterNode (All-Pass Filter) -> AudioDestinationNode (Output)
oscillator.connect(allpass);
allpass.connect(context.destination);

// Connect nodes for LFO that changes All-Pass Filter frequency periodically
// OscillatorNode (LFO) -> GainNode (Depth) -> frequency (AudioParam)
lfo.connect(depth);
depth.connect(allpass.frequency);

// Start oscillator and LFO
oscillator.start(0);
lfo.start(0);

// Stop oscillator and LFO
oscillator.stop(context.currentTime + 5);
lfo.stop(context.currentTime + 5);

これで, 位相を変化させた音と干渉によって生じる振幅の増減, つまり, フェイザーのエフェクト音を知覚できるようになったと思います. あとは, コーラスやフランジャーと同様に, 原音とエフェクト音のゲインを制御できるように, Dry / Wet のための GainNode を接続します.

const context = new AudioContext();

const baseFrequency = 880;
const depthValue    = 220;
const rateValue     = 1;

const oscillator = new OscillatorNode(context, { type: 'sawtooth' });
const allpass    = new BiquadFilterNode(context, { type: 'allpass', frequency: baseFrequency });

const lfo   = new OscillatorNode(context, { frequency: rateValue });
const depth = new GainNode(context, { gain: depthValue });

const dry = new GainNode(context, { gain: 0.5 });  // for gain of original sound
const wet = new GainNode(context, { gain: 0.5 });  // for gain of phaser sound

// Connect nodes for original sound
// OscillatorNode (Input) -> GainNode (Dry) -> AudioDestinationNode (Output)
oscillator.connect(dry);
dry.connect(context.destination);

// Connect nodes for shifting phase
// OscillatorNode (Input) -> BiquadFilterNode (All-Pass Filter) -> GainNode (Wet) -> AudioDestinationNode (Output)
oscillator.connect(allpass);
allpass.connect(wet);
wet.connect(context.destination);

// Connect nodes for LFO that changes All-Pass Filter frequency periodically
// OscillatorNode (LFO) -> GainNode (Depth) -> frequency (AudioParam)
lfo.connect(depth);
depth.connect(allpass.frequency);

// Start oscillator and LFO
oscillator.start(0);
lfo.start(0);

// Stop oscillator and LFO
oscillator.stop(context.currentTime + 5);
lfo.stop(context.currentTime + 5);

現実世界のフェイザーは, よりアグレッシブな干渉を発生させるために, All-Pass Filter を複数接続します. 2 個, 4 個, 12 個, 24 個の接続可能なフェイザーが多く, それらは, All-Pass Filter の接続数 $n$ 個によって, $n$ 段フェイザーと呼ばれることもあります.

以下は, All-Pass Filter を 4 つ接続したフェイザー (4 段フェイザー) の実装です. 1 つだけの接続の場合より, 干渉による変化が大きく聴こえると思います.

const context = new AudioContext();

const baseFrequency = 880;
const depthValue    = 220;
const rateValue     = 1;

const oscillator = new OscillatorNode(context, { type: 'sawtooth' });

const allpasses  = [
  new BiquadFilterNode(context, { type: 'allpass', frequency: baseFrequency }),
  new BiquadFilterNode(context, { type: 'allpass', frequency: baseFrequency }),
  new BiquadFilterNode(context, { type: 'allpass', frequency: baseFrequency }),
  new BiquadFilterNode(context, { type: 'allpass', frequency: baseFrequency })
];

const lfo   = new OscillatorNode(context, { frequency: rateValue });
const depth = new GainNode(context, { gain: depthValue });

const dry = new GainNode(context, { gain: 0.5 });  // for gain of original sound
const wet = new GainNode(context, { gain: 0.5 });  // for gain of phaser sound

// Connect nodes for original sound
// OscillatorNode (Input) -> GainNode (Dry) -> AudioDestinationNode (Output)
oscillator.connect(dry);
dry.connect(context.destination);

// Connect nodes for shifting phase
// OscillatorNode (Input) -> BiquadFilterNode (All-Pass Filter) x 4 -> GainNode (Wet) -> AudioDestinationNode (Output)
oscillator.connect(allpasses[0]);

for (let i = 0; i < 3; i++) {
  allpasses[i].connect(allpasses[i + 1]);
}

allpasses[3].connect(wet);
wet.connect(context.destination);

// Connect nodes for LFO that changes All-Pass Filter frequency periodically
// OscillatorNode (LFO) -> GainNode (Depth) -> frequency (AudioParam)
lfo.connect(depth);

for (let i = 0; i < 4; i++) {
  depth.connect(allpasses[i].frequency);
}

// Start oscillator and LFO
oscillator.start(0);
lfo.start(0);

// Stop oscillator and LFO
oscillator.stop(context.currentTime + 5);
lfo.stop(context.currentTime + 5);

トレモロ

トレモロは振幅 (音の大きさ) を周期的に変化させることによって, 実装することができます. つまり, LFO を, GainNode の gain プロパティ (AudioParam) に接続することによって実装できます. トレモロは, これまで解説したディレイ・リバーブ, コーラス・フランジャー, フェイザーなどと異なり, 原音を変化させるので, AudioNode の接続も実装も非常にシンプルです (トレモロのようのな, 原音を直接変化させるエフェクターをインサートエフェクトと呼ぶことがあります).

const context = new AudioContext();

const depthValue = 0.25;
const rateValue  = 2.5;

const amplitude = new GainNode(context, { gain: 0.5 });  // 0.5 +- ${depthValue}

const oscillator = new OscillatorNode(context);

const lfo   = new OscillatorNode(context, { frequency: rateValue });
const depth = new GainNode(context, { gain: depthValue });

// Connect nodes
// OscillatorNode (Input) -> GainNode (Amplitude) -> AudioDestinationNode (Output)
oscillator.connect(amplitude);
amplitude.connect(context.destination);

// Connect nodes for LFO that changes gain periodically
// OscillatorNode (LFO) -> GainNode (Depth) -> gain (AudioParam)
lfo.connect(depth);
depth.connect(amplitude.gain);

// Start oscillator and LFO
oscillator.start(0);
lfo.start(0);

// Stop oscillator and LFO
oscillator.stop(context.currentTime + 5);
lfo.stop(context.currentTime + 5);

トレモロは, 振幅 1 を基準に値が変化するように定義されています ($f_{s}$ はサンプリング周波数). しかしながら, そのまま実装すると, 実際には音割れ (クリッピング) が発生してしまうので, 実装では, 0.5 を基準に, Depth の値が増減するようにしています.

以下は, 実際のアプリケーションを想定して, ユーザーインタラクティブに, トレモロに関わるパラメータを制御できるようにしたコード例です. トレモロのような (他には, コンプレッサーやディストーションなど) インサートエフェクトでは, パラメータの制御のみでエフェクターを OFF にする場合が難しい場合もあるので, コード例のように, フラグなどに応じて, AudioNode の接続自体を切り替えるような実装が必要になります (もっとも, トレモロの場合, Depth を 0 に設定することで, 原音をそのまま出力することが可能です).

<button type="button">start</button>
<label>
  <input type="checkbox" id="checkbox-tremolo" checked />
  <span id="print-checked-tremolo">ON</span>
</label>
<label for="range-tremolo-depth">Depth</label>
<input type="range" id="range-tremolo-depth" value="0" min="0" max="1" step="0.05" />
<span id="print-tremolo-depth-value">0</span>
<label for="range-tremolo-rate">Rate</label>
<input type="range" id="range-tremolo-rate" value="0" min="0" max="10" step="0.5" />
<span id="print-tremolo-rate-value">0</span>

const context = new AudioContext();

let depthRate = 0;
let rateValue = 0;

let oscillator = new OscillatorNode(context);
let lfo        = new OscillatorNode(context, { frequency: rateValue });

let isStop = true;

const amplitude = new GainNode(context, { gain: 0.5 });  // 0.5 +- ${depthValue}
const depth     = new GainNode(context, { gain: amplitude.gain.value * depthRate });

const buttonElement = document.querySelector('button[type="button"]');
const checkboxElement = document.querySelector('input[type="checkbox"]');

const rangeDepthElement = document.getElementById('range-tremolo-depth');
const rangeRateElement  = document.getElementById('range-tremolo-rate');

const spanPrintCheckedElement = document.getElementById('print-checked-tremolo');
const spanPrintDepthElement   = document.getElementById('print-tremolo-depth-value');
const spanPrintRateElement    = document.getElementById('print-tremolo-rate-value');

checkboxElement.addEventListener('click', () => {
  oscillator.disconnect(0);
  amplitude.disconnect(0);
  lfo.disconnect(0);

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> GainNode (Amplitude) -> AudioDestinationNode (Output)
    oscillator.connect(amplitude);
    amplitude.connect(context.destination);

    // Connect nodes for LFO that changes gain periodically
    // OscillatorNode (LFO) -> GainNode (Depth) -> gain (AudioParam)
    lfo.connect(depth);
    depth.connect(amplitude.gain);

    spanPrintCheckedElement.textContent = 'ON';
  } else {
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    spanPrintCheckedElement.textContent = 'OFF';
  }
});

buttonElement.addEventListener('mousedown', () => {
  if (!isStop) {
    return;
  }

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> GainNode (Amplitude) -> AudioDestinationNode (Output)
    oscillator.connect(amplitude);
    amplitude.connect(context.destination);

    // Start oscillator
    oscillator.start(0);
  } else {
    amplitude.disconnect(0);

    // Connect nodes (Tremolo OFF)
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    // Start oscillator
    oscillator.start(0);
  }

  // Connect nodes for LFO that changes gain periodically
  // OscillatorNode (LFO) -> GainNode (Depth) -> gain (AudioParam)
  lfo.connect(depth);
  depth.connect(amplitude.gain);

  lfo.start(0);

  isStop = false;

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (isStop) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);
  lfo.stop(0);

  oscillator = new OscillatorNode(context);
  lfo        = new OscillatorNode(context, { frequency: rateValue });

  isStop = true;

  buttonElement.textContent = 'start';
});

rangeDepthElement.addEventListener('input', (event) => {
  depthRate = event.currentTarget.valueAsNumber;

  depth.gain.value = amplitude.gain.value * depthRate;

  spanPrintDepthElement.textContent = depthRate.toString(10);
});

rangeRateElement.addEventListener('input', (event) => {
  rateValue = event.currentTarget.valueAsNumber;

  if (lfo) {
    lfo.frequency.value = rateValue;
  }

  spanPrintRateElement.textContent = rateValue.toString(10);
});

リンクモジュレーター

リングモジュレーターは, AudioNode の接続としてはトレモロと同じです. LFO の Rate (変調の周波数)を, およそ 100 Hz 以上にしていくと, 原音の周波数成分とは異なる周波数成分が発生するようになります. この周波数成分が金属的な音を生み出す要因となって, 原理は同じながらも, トレモロとは異なるエフェクトを得ることができます.

リングモジュレーターは, 原音の振幅を正弦波で変調するように定義されているので, トレモロと異なり, 基準となる gain プロパティの値は 0 を設定しています.

以下は, 同様に実際のアプリケーションを想定して, ユーザーインタラクティブに, リングモジュレーターに関わるパラメータを制御できるようにしたコード例です. 定義式にしたがって, 基準となる gain プロパティの値を 0 にしていること, また, Rate がトレモロより高い値に設定できるようにしていることに着目してください.

<button type="button">start</button>
<label>
  <input type="checkbox" id="checkbox-ringmodulator" checked />
  <span id="print-checked-ringmodulator">ON</span>
</label>
<label for="range-ringmodulator-depth">Depth</label>
<input type="range" id="range-ringmodulator-depth" value="1" min="0" max="1" step="0.05" />
<span id="print-ringmodulator-depth-value">1</span>
<label for="range-ringmodulator-rate">Rate</label>
<input type="range" id="range-ringmodulator-rate" value="1000" min="0" max="2000" step="100" />
<span id="print-ringmodulator-rate-value">1000</span>

const context = new AudioContext();

let depthRate = 1;
let rateValue = 1000;

let oscillator = new OscillatorNode(context);
let lfo        = new OscillatorNode(context, { frequency: rateValue });

let isStop = true;

const amplitude = new GainNode(context, { gain: 0 });  // 0 +- ${depthValue}
const depth     = new GainNode(context, { gain: depthRate });

const buttonElement = document.querySelector('button[type="button"]');
const checkboxElement = document.querySelector('input[type="checkbox"]');

const rangeDepthElement = document.getElementById('range-ringmodulator-depth');
const rangeRateElement  = document.getElementById('range-ringmodulator-rate');

const spanPrintCheckedElement = document.getElementById('print-checked-ringmodulator');
const spanPrintDepthElement   = document.getElementById('print-ringmodulator-depth-value');
const spanPrintRateElement    = document.getElementById('print-ringmodulator-rate-value');

checkboxElement.addEventListener('click', () => {
  oscillator.disconnect(0);
  amplitude.disconnect(0);
  lfo.disconnect(0);

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> GainNode (Amplitude) -> AudioDestinationNode (Output)
    oscillator.connect(amplitude);
    amplitude.connect(context.destination);

    // Connect nodes for LFO that changes gain periodically
    // OscillatorNode (LFO) -> GainNode (Depth) -> gain (AudioParam)
    lfo.connect(depth);
    depth.connect(amplitude.gain);

    spanPrintCheckedElement.textContent = 'ON';
  } else {
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    spanPrintCheckedElement.textContent = 'OFF';
  }
});

buttonElement.addEventListener('mousedown', () => {
  if (!isStop) {
    return;
  }

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> GainNode (Amplitude) -> AudioDestinationNode (Output)
    oscillator.connect(amplitude);
    amplitude.connect(context.destination);

    // Start oscillator
    oscillator.start(0);
  } else {
    amplitude.disconnect(0);

    // Connect nodes (Ring Modulator OFF)
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    // Start oscillator
    oscillator.start(0);
  }

  // Connect nodes for LFO that changes gain periodically
  // OscillatorNode (LFO) -> GainNode (Depth) -> gain (AudioParam)
  lfo.connect(depth);
  depth.connect(amplitude.gain);

  lfo.start(0);

  isStop = false;

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (isStop) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);
  lfo.stop(0);

  oscillator = new OscillatorNode(context);
  lfo        = new OscillatorNode(context, { frequency: rateValue });

  isStop = true;

  buttonElement.textContent = 'start';
});

rangeDepthElement.addEventListener('input', (event) => {
  depthRate = event.currentTarget.valueAsNumber;

  depth.gain.value = depthRate;

  spanPrintDepthElement.textContent = depthRate.toString(10);
});

rangeRateElement.addEventListener('input', (event) => {
  rateValue = event.currentTarget.valueAsNumber;

  if (lfo) {
    lfo.frequency.value = rateValue;
  }

  spanPrintRateElement.textContent = rateValue.toString(10);
});

AM 変調

AM 変調 (Amplitude Modulation) とは, 時間の経過とともに信号の振幅を変化させることです.

変調の周期を短くしていくと (LFO の Rate を高くしていくと), 原音の周波数成分だけではなく, LFO の周波数も周波数成分として発生します. これは, 原音の波形がキャリア (搬送波) となって, LFO の正弦波がモジュレーターとなってエンベロープを形成して周波数成分となるからです (出力音のエンベロープが正弦波になっていることに着目してください).

この仕組みを発展させた音合成が, FM シンセサイザー (FM 音源) で, キャリア (搬送波) とモジュレーターの波形を正弦波として, それらを合成する正弦波によって定義されます ($A$ はキャリアの振幅, $f_{c}$ はキャリアの周波数, $\beta$ は変調指数 (LFO の Depth に相当), $f_{m}$ はモジュレーターの周波数 (LFO の Rate に相当)).

(命名的に混同しますが) リングモジュレーター自体の原理は AM 変調であり, それが, FM シンセサイザーの原理になっているということです.

BiquadFilterNode

Web Audio API において, 様々なフィルタを簡単に利用するには BiquadFilterNode を使うのが最適です. Biquad とは, 双 2 次という意味で, BiquadFilterNode の次数は 2 次となります (以下の伝達関数で定義されています). したがって, BiquadFilterNode では実装できないフィルタ, 具体的には, 奇数次のフィルタを使いたい場合, あとのセクションで解説する IIRFilterNode を使う必要があります (BiquadFilterNode は 2 次の IIR フィルタです).

BiquadFilterNode では, フィルタの特性に関わるプロパティとして, type プロパティ (BiquadFilterType), frequency / detune プロパティ (どちらも AudioParam), Q プロパティ (AudioParam), gain プロパティ (AudioParam) が定義されています. type プロパティ以外は, type プロパティ (すなわち, フィルタの種類) によって, 制御するフィルタの特性が異なったり, あるいは, そもそも無効だったりするので, BiquadFilterNode で使える 8 つのフィルタの種類ごとに解説を進めます.

フィルタの種類に関わらず, BiquadFilterNode は, そのインスタンスを接続するだけで機能します (また, コンストラクタ形式であれば, インスタンス生成時に, 第 2 引数に BiquadFilterOptions を指定して, 初期値を変更することも可能です).

const context = new AudioContext();

const oscillator = new OscillatorNode(context, { type: 'sawtooth' });
const filter     = new BiquadFilterNode(context);

// If use `createBiquadFilter`
// const filter = context.createBiquadFilter();

// OscillatorNode (Input) -> BiquadFilterNode -> AudioDestinationNode (Output)
oscillator.connect(filter);
filter.connect(context.destination);

oscillator.start(0);

IIRFilterNode

BiquadFilterNode では実装できない IIR フィルタを実装する場合, 次の手段としては, IIRFilterNode クラスを利用することです (最後の手段は, AudioWorklet で実装することです).

IIRFilterNode では, BiquadFilterNode でフィルタの特性に影響を与えていた, frequency プロパティや Q プロパティ, gain プロパティなどは, リアルタイムに変化させることができなくなる点には注意してください. IIRFilterNode に与えるパラメータは, AudioParam ではないからです.

実装としては, IIRFilterNode コンストラクタの第 2 引数に, IIRFilterOptions として, フィルタの係数の配列を設定します. IIRFilterOptions オブジェクトの feedforward プロパティは, IIR フィルタの伝達関数の分子となる係数 (以下の伝達関数の $b_{m}$), feedback プロパティは, IIR フィルタの伝達関数の分母となる係数 (以下の伝達関数の $a_{n}$) をそれぞれ設定します (ファクトリメソッドの場合, 第 1 引数に feedforward, 第 2 引数に feedback を指定します). IIRFilterNode の伝達関数は以下の定義式となります. BiquadFilterNode の伝達関数と異なり, フィルタの次数を自由に設定できる点に着目してください.

ただし, まったく制約がないわけではなく, 0 次のフィルタはエラーとなります (それ以外にも, $a_{0}$ は, 0 以外の値である必要があったり, 係数がすべて 0 の feedforward はエラーとなったりします). また, 実装上, 20 次までのフィルタが上限となります.

簡易的ではありますが, 1 次の IIR フィルタによる, Low-Pass Filter と High-Pass Filter の実装例です.

const context = new AudioContext();

const cutoff = 1000;  // 1000 Hz

const b = (cutoff / context.sampleRate) * Math.PI;

const b0 = b;
const b1 = b;
const a0 =  1 + b;
const a1 = -1 + b;

const feedforward = new Float64Array([b0, b1]);
const feedback    = new Float64Array([a0, a1]);

const oscillator = new OscillatorNode(context, { type: 'sawtooth' });
const filter     = new IIRFilterNode(context, { feedforward, feedback });

// If use `createIIRFilter`
// const filter = context.createIIRFilter(feedforward, feedback);

// OscillatorNode (Input) -> IIRFilterNode (Low-Pass Filter) -> AudioDestinationNode (Output)
oscillator.connect(filter);
filter.connect(context.destination);

oscillator.start(0);

const context = new AudioContext();

const cutoff = 4000;  // 4000 Hz

const a = (cutoff / context.sampleRate) * Math.PI;

const b0 =  1;
const b1 = -1;
const a0 =  1 + a;
const a1 = -1 + a;

const feedforward = new Float64Array([b0, b1]);
const feedback    = new Float64Array([a0, a1]);

const oscillator = new OscillatorNode(context, { type: 'sawtooth' });
const filter     = new IIRFilterNode(context, { feedforward, feedback });

// If use `createIIRFilter`
// const filter = context.createIIRFilter(feedforward, feedback);

// OscillatorNode (Input) -> IIRFilterNode (High-Pass Filter) -> AudioDestinationNode (Output)
oscillator.connect(filter);
filter.connect(context.destination);

oscillator.start(0);

IIR フィルタ

IIR フィルタ (Infinite Impulse Response filter) は, 以下の数式で定義されるデジタルフィルタです.

フィルタを通過した音が再度フィルタを通ることになる, フィードバックがあることが, FIR フィルタと大きく異なる点です. 定義式上は無限にインパルス応答が続くことになるので, Infinite (無限の) と命名されています (もちろん, コンピュータでは無限のフィルタを実装することはできないので, 有限の次数でうちきる必要があります. IIRFilterNode の場合, その上限が 20 ということです). また, フィードバックの項 ($a\left(m\right)$) は, $m = 1$ から始まっている点に着目してください.

フィードバックがある利点は, 次数の低いフィルタでも性能のよいフィルタ, つまり, 通過する周波数成分と遮断する周波数成分を可能な限りはっきりと分ける (理想フィルタに近づける) フィルタが低次数で実装できます (実際, BiquadFilterNode の次数は 2 次です).

具体的に, 2 次の IIR フィルタ ($J = I = 2$) を加算器・乗算器・遅延器の要素を利用してブロック図として表現します.

3 バンドイコライザー

3 バンドイコライザーは, 低音域・中音域・高音域の 3 つの帯域をブースト・カット可能なイコライザーですが, 実装としては, Low-Shelving Filter, Peaking Filter, High-Shelving Filter を使うだけで実装できます. つまり, 3 つの帯域を制御する BiquadFilterNode インスタンスを生成して, 接続することで実装可能です. このとき, それぞれのフィルタの $f_{\mathrm{computed}}$ は厳密に決まっているわけではありませんが, 以下のような値が設定されることが多いようです.

Low-Shelving Filter (低音域)

250 Hz ~ 500 Hz

Peaking Filter (中音域)

1000 Hz ~ 2000 Hz

High-Shelving Filter (高音域)

4000 Hz ~ 8000 Hz

また, Peaking Filter のみ, Q プロパティの値を設定可能ですが, これも厳密に決まっているわけではありませんが, コード例としては $\frac{1}{\sqrt{2}}$ を設定しています.

現実世界のイコライザーでは, それぞれ 3 つのフィルタの gain プロパティの値を変更して, ブースト・カットします. また, それらのパラメータ (gain プロパティの値) は, 低音域は Bass, 中音域は Middle, 高音域は Treble として制御可能になっているイコライザーがほとんどです (ちなみに, 超高音域がある場合, Presence となっています).

以下は, 上記のフィルタ特性となる 3 バンドイコライザーを実際のアプリケーションを想定して, ユーザーインタラクティブに, 3 つの周波数帯域をブースト・カットできるようにしたコード例です. 原音を直接変化させるインサートエフェクトなので, 本質的な実装は, 3 つの帯域を制御する BiquadFilterNode インスタンスの接続処理です. 現実世界の 3 バンドイコライザーでは, ユーザーが操作できるパラメーターではありませんが, $f_{\mathrm{computed}}$ の値や Peaking Filter の Q プロパティの値なども変更してみて, 好みの値を探索してみるのもよいと思います.

<button type="button">start</button>
<label>
  <input type="checkbox" id="checkbox-3-bands-equalizer" checked />
  <span id="print-checked-3-bands-equalizer">ON</span>
</label>
<label>
  <span>OscillatorNode frequency</span>
  <input type="range" id="range-3-bands-equalizer-oscillator-frequency" value="440" min="27.5" max="4000" step="0.5" />
  <span id="print-3-bands-equalizer-oscillator-frequency-value">440 Hz</span>
</label>
<label for="range-3-bands-equalizer-bass">Bass</label>
<input type="range" id="range-3-bands-equalizer-bass" value="0" min="-24" max="24" step="1" />
<span id="print-3-bands-equalizer-bass-value">0 dB</span>
<label for="range-3-bands-equalizer-middle">Middle</label>
<input type="range" id="range-3-bands-equalizer-middle" value="0" min="-24" max="24" step="1" />
<span id="print-3-bands-equalizer-middle-value">0 dB</span>
<label for="range-3-bands-equalizer-treble">Treble</label>
<input type="range" id="range-3-bands-equalizer-treble" value="0" min="-24" max="24" step="1" />
<span id="print-3-bands-equalizer-treble-value">0 dB</span>

const context = new AudioContext();

let frequency = 440;

let oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency });

let isStop = true;

const bass   = new BiquadFilterNode(context, { type: 'lowshelf', frequency: 250 });
const middle = new BiquadFilterNode(context, { type: 'peaking', frequency: 1000, Q: Math.SQRT1_2 });
const treble = new BiquadFilterNode(context, { type: 'highshelf', frequency: 4000 });

const buttonElement   = document.querySelector('button[type="button"]');
const checkboxElement = document.querySelector('input[type="checkbox"]');

const rangeBassElement   = document.getElementById('range-3-bands-equalizer-bass');
const rangeMiddleElement = document.getElementById('range-3-bands-equalizer-middle');
const rangeTrebleElement = document.getElementById('range-3-bands-equalizer-treble');

const spanPrintCheckedElement = document.getElementById('print-checked-3-bands-equalizer');
const spanPrintBassElement    = document.getElementById('print-3-bands-equalizer-bass-value');
const spanPrintMiddleElement  = document.getElementById('print-3-bands-equalizer-middle-value');
const spanPrintTrebleElement  = document.getElementById('print-3-bands-equalizer-treble-value');

const rangeOscillatorFrequencyElement     = document.getElementById('range-3-bands-equalizer-oscillator-frequency');
const spanPrintOscillatorFrequencyElement = document.getElementById('print-3-bands-equalizer-oscillator-frequency-value');

checkboxElement.addEventListener('click', () => {
  oscillator.disconnect(0);

  if (checkboxElement.checked) {
    // OscillatorNode (Input) -> Equalizer (Low-Shelving Filter -> Peaking Filter -> High-Shelving Filter) -> AudioDestinationNode (Output)
    oscillator.connect(bass);
    bass.connect(middle);
    middle.connect(treble);
    treble.connect(context.destination);

    spanPrintCheckedElement.textContent = 'ON'
  } else {
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    spanPrintCheckedElement.textContent = 'OFF'
  }
});

buttonElement.addEventListener('mousedown', () => {
  if (!isStop) {
    return;
  }

  if (checkboxElement.checked) {
    // Connect nodes (Equalizer ON)
    // OscillatorNode (Input) -> Equalizer (Low-Shelving Filter -> Peaking Filter -> High-Shelving Filter) -> AudioDestinationNode (Output)
    oscillator.connect(bass);
    bass.connect(middle);
    middle.connect(treble);
    treble.connect(context.destination);
  } else {
    // Connect nodes (Equalizer OFF)
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);
  }

  // Start oscillator
  oscillator.start(0);

  isStop = false;

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (isStop) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);

  oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency });

  isStop = true;

  buttonElement.textContent = 'start';
});

rangeOscillatorFrequencyElement.addEventListener('input', (event) => {
  frequency = event.currentTarget.valueAsNumber;

  if (oscillator) {
    oscillator.frequency.value = frequency
  }

  spanPrintOscillatorFrequencyElement.textContent = `${frequency} Hz`;
});

rangeBassElement.addEventListener('input', (event) => {
  const gain = event.currentTarget.valueAsNumber;

  bass.gain.value = gain;

  spanPrintBassElement.textContent = `${gain} dB`;
});

rangeMiddleElement.addEventListener('input', (event) => {
  const gain = event.currentTarget.valueAsNumber;

  middle.gain.value = gain;

  spanPrintMiddleElement.textContent = `${gain} dB`;
});

rangeTrebleElement.addEventListener('input', (event) => {
  const gain = event.currentTarget.valueAsNumber;

  treble.gain.value = gain;

  spanPrintTrebleElement.textContent = `${gain} dB`;
});

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

グラフィックイコライザーは, 10 帯域ほどの周波数成分をブースト・カットできるイコライザーですが, 実装としては, Peaking Filter を制御したい周波数帯域の数だけ接続するだけです. $f_{\mathrm{computed}}$ を制御したい周波数帯域に設定します.

以下は, 上記のフィルタ特性となるグラフィックイコライザーを実際のアプリケーションを想定して, ユーザーインタラクティブに, 各周波数帯域をブースト・カットできるようにしたコード例です.

<button type="button">start</button>
<label>
  <input type="checkbox" id="checkbox-graphic-equalizer" checked />
  <span id="print-checked-graphic-equalizer">ON</span>
</label>
<label>
  <span>OscillatorNode frequency</span>
  <input type="range" id="range-graphic-equalizer-oscillator-frequency" value="440" min="27.5" max="4000" step="0.5" />
  <span id="print-graphic-equalizer-oscillator-frequency-value">440 Hz</span>
</label>
<label for="range-graphic-equalizer-32Hz">32 Hz</label>
<input type="range" id="range-graphic-equalizer-32Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-32Hz-value">0 dB</span>
<label for="range-graphic-equalizer-62Hz">62.5 Hz</label>
<input type="range" id="range-graphic-equalizer-62Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-62Hz-value">0 dB</span>
<label for="range-graphic-equalizer-125Hz">125 Hz</label>
<input type="range" id="range-graphic-equalizer-125Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-125Hz-value">0 dB</span>
<label for="range-graphic-equalizer-250Hz">250 Hz</label>
<input type="range" id="range-graphic-equalizer-250Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-250Hz-value">0 dB</span>
<label for="range-graphic-equalizer-500Hz">500 Hz</label>
<input type="range" id="range-graphic-equalizer-500Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-500Hz-value">0 dB</span>
<label for="range-graphic-equalizer-1000Hz">1000 Hz</label>
<input type="range" id="range-graphic-equalizer-1000Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-1000Hz-value">0 dB</span>
<label for="range-graphic-equalizer-2000Hz">2000 Hz</label>
<input type="range" id="range-graphic-equalizer-2000Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-2000Hz-value">0 dB</span>
<label for="range-graphic-equalizer-4000Hz">4000 Hz</label>
<input type="range" id="range-graphic-equalizer-4000Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-4000Hz-value">0 dB</span>
<label for="range-graphic-equalizer-8000Hz">8000 Hz</label>
<input type="range" id="range-graphic-equalizer-8000Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-8000Hz-value">0 dB</span>
<label for="range-graphic-equalizer-16000Hz">1.6 kHz</label>
<input type="range" id="range-graphic-equalizer-16000Hz" value="0" min="-24" max="24" step="1" />
<span id="print-graphic-equalizer-16000Hz-value">0 dB</span>

const context = new AudioContext();

let frequency = 440;

let oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency });

let isStop = true;

const buttonElement   = document.querySelector('button[type="button"]');
const checkboxElement = document.querySelector('input[type="checkbox"]');

const spanPrintCheckedElement = document.getElementById('print-checked-graphic-equalizer');

const rangeOscillatorFrequencyElement     = document.getElementById('range-graphic-equalizer-oscillator-frequency');
const spanPrintOscillatorFrequencyElement = document.getElementById('print-graphic-equalizer-oscillator-frequency-value');

const centerFrequencies = [32, 62.5, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];

const peakingFilters = centerFrequencies.map((frequency) => {
  return new BiquadFilterNode(context, { type: 'peaking', frequency, Q: Math.SQRT1_2 });
});

centerFrequencies.forEach((frequency, index) => {
  document.getElementById(`range-graphic-equalizer-${Math.trunc(frequency)}Hz`).addEventListener('input', (event) => {
    const peakingFilter = peakingFilters[index];

    peakingFilter.gain.value = event.currentTarget.valueAsNumber;

    document.getElementById(`print-graphic-equalizer-${Math.trunc(frequency)}Hz-value`).textContent = `${peakingFilter.gain.value} dB`;
  });
});

checkboxElement.addEventListener('click', () => {
  oscillator.disconnect(0);

  if (checkboxElement.checked) {
    oscillator.connect(peakingFilters[0]);

    for (let i = 0, len = peakingFilters.length - 1; i < len; i++) {
      peakingFilters[i].connect(peakingFilters[i + 1]);
    }

    peakingFilters[peakingFilters.length - 1].connect(context.destination);

    spanPrintCheckedElement.textContent = 'ON';
  } else {
    oscillator.connect(context.destination);

    spanPrintCheckedElement.textContent = 'OFF';
  }
});

buttonElement.addEventListener('mousedown', () => {
  if (!isStop) {
    return;
  }

  if (checkboxElement.checked) {
    oscillator.connect(peakingFilters[0]);

    for (let i = 0, len = peakingFilters.length - 1; i < len; i++) {
      peakingFilters[i].connect(peakingFilters[i + 1]);
    }

    peakingFilters[peakingFilters.length - 1].connect(context.destination);
  } else {
    oscillator.connect(context.destination);
  }

  oscillator.start(0);

  isStop = false;

  buttonElement.textContent = 'stop'
});

buttonElement.addEventListener('mouseup', () => {
  if (isStop) {
    return;
  }

  oscillator.stop(0);

  oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency });

  isStop = true;

  buttonElement.textContent = 'start';
});

rangeOscillatorFrequencyElement.addEventListener('input', (event) => {
  frequency = event.currentTarget.valueAsNumber;

  if (oscillator) {
    oscillator.frequency.value = frequency;
  }

  spanPrintOscillatorFrequencyElement.textContent = `${frequency} Hz`;
});

ペダルワウ

Web ブラウザでペダルワウを実装するには, ハードウェア的な制約があるので, このセクションでは, LFO を擬似的なワウペダルとしてペダルワウの実装を解説します (もし, Web MIDI API の理解があり, MIDI 機器があれば, ベロシティなどに応じて $f_{\mathrm{computed}}$ を変化させるようにすると, よりペダルワウに近い体験ができると思います).

原理をそのまま実装に落とし込めば, ペダルワウの実装はトレモロなどと同じです. BiquadFilterNode を接続して, frequency プロパティ (AudioParam) に LFO を接続して時間経過とともに $f_{\mathrm{computed}}$ を変化させることで実装可能です. Low-Pass Filter を使う場合, カットオフ周波数付近の急峻を鋭くしておく必要があるので, Q プロパティの値は 10 ~ 20 程度に設定しておく必要があります (Band-Pass Filter の場合は, デフォルト値で問題ありません).

IIRFilterNode を使っても実装は可能ですが, その場合, カットオフ周波数は AudioParam ではないので, LFO も AudioWorklet を利用して実装する必要が生じます. 特にフィルタのチューニングが必要なければ (奇数次の IIR フィルタを使わなければならない理由があるなど), BiquadFilterNode を使うほうが実装は簡潔になります.

const context = new AudioContext();

const cutoff    = 880;
const depthRate = 0.5;
const rateValue = 0.5;
const resonance = 10;

const lowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: cutoff, Q: resonance });

const oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });

const lfo   = new OscillatorNode(context, { frequency: rateValue });
const depth = new GainNode(context, { gain: cutoff * depthRate });

// Connect nodes
// OscillatorNode (Input) -> BiquadFilterNode (Low-Pass Filter) -> AudioDestinationNode (Output)
oscillator.connect(lowpass);
lowpass.connect(context.destination);

// Connect nodes for LFO that changes Low-Pass Filter's frequency periodically
// OscillatorNode (LFO) -> GainNode (Depth) -> delayTime (AudioParam)
lfo.connect(depth);
depth.connect(lowpass.frequency);

// Start oscillator and LFO
oscillator.start(0);
lfo.start(0);

// Stop oscillator and LFO
oscillator.stop(context.currentTime + 10);
lfo.stop(context.currentTime + 10);

以下は, 実際のアプリケーションを想定して, ユーザーインタラクティブに, ペダルワウに関わるパラメータを制御できるようにしたコード例です. 一般的なペダルワウでは, ワウペダルのプレッシャーレベルに応じて, カットオフ周波数 ($f_{\mathrm{computed}}$) が変化するようになっていますが, LFO を擬似的なワウペダルとした実装なので, 基準となる $f_{\mathrm{computed}}$ と Depth でワウペダルのプレッシャーレベルを, Rate でペダルの動きを擬似的に実装しています.

<button type="button">start</button>
<label>
  <input type="checkbox" id="checkbox-pedal-wah" checked />
  <span id="print-checked-pedal-wah">ON</span>
</label>
<label for="range-pedal-wah-cutoff">Cutoff Frequency</label>
<input type="range" id="range-pedal-wah-cutoff" value="1000" min="1000" max="2000" step="1" />
<span id="print-pedal-wah-cutoff-value">1000 Hz</span>
<label for="range-pedal-wah-depth">Depth</label>
<input type="range" id="range-pedal-wah-depth" value="0" min="0" max="1" step="0.05" />
<span id="print-pedal-wah-depth-value">0</span>
<label for="range-pedal-wah-rate">Rate</label>
<input type="range" id="range-pedal-wah-rate" value="0" min="0" max="10" step="0.5" />
<span id="print-pedal-wah-rate-value">0</span>
<label for="range-pedal-wah-resonance">Resonance</label>
<input type="range" id="range-pedal-wah-resonance" value="1" min="1" max="20" step="1" />
<span id="print-pedal-wah-resonance-value">1</span>

const context = new AudioContext();

let cutoff    = 1000;
let depthRate = 0;
let rateValue = 0;
let resonance = 1;

let oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });
let lfo        = new OscillatorNode(context, { frequency: rateValue });

let isStop = true;

const lowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: cutoff, Q: resonance });
const depth   = new GainNode(context, { gain: lowpass.frequency.value * depthRate });

const buttonElement   = document.querySelector('button[type="button"]');
const checkboxElement = document.querySelector('input[type="checkbox"]');

const rangeCutoffElement    = document.getElementById('range-pedal-wah-cutoff');
const rangeDepthElement     = document.getElementById('range-pedal-wah-depth');
const rangeRateElement      = document.getElementById('range-pedal-wah-rate');
const rangeResonanceElement = document.getElementById('range-pedal-wah-resonance');

const spanPrintCheckedElement   = document.getElementById('print-checked-pedal-wah');
const spanPrintCutoffElement    = document.getElementById('print-pedal-wah-cutoff-value');
const spanPrintDepthElement     = document.getElementById('print-pedal-wah-depth-value');
const spanPrintRateElement      = document.getElementById('print-pedal-wah-rate-value');
const spanPrintResonanceElement = document.getElementById('print-pedal-wah-resonance-value');

checkboxElement.addEventListener('click', () => {
  oscillator.disconnect(0);
  lowpass.disconnect(0);
  lfo.disconnect(0);

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> BiquadFilterNode (Low-Pass Filter) -> AudioDestinationNode (Output)
    oscillator.connect(lowpass);
    lowpass.connect(context.destination);

    // Connect nodes for LFO that changes Low-Pass Filter's frequency periodically
    // OscillatorNode (LFO) -> GainNode (Depth) -> frequency (AudioParam)
    lfo.connect(depth);
    depth.connect(lowpass.frequency);

    spanPrintCheckedElement.textContent = 'ON';
  } else {
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    spanPrintCheckedElement.textContent = 'OFF';
  }
});

buttonElement.addEventListener('mousedown', () => {
  if (!isStop) {
    return;
  }

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> BiquadFilterNode (Low-Pass Filter) -> AudioDestinationNode (Output)
    oscillator.connect(lowpass);
    lowpass.connect(context.destination);

    // Start oscillator
    oscillator.start(0);
  } else {
    lowpass.disconnect(0);

    // Connect nodes (Pedal Wah OFF)
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    // Start oscillator
    oscillator.start(0);
  }

  // Connect nodes for LFO that changes Low-Pass Filter's frequency periodically
  // OscillatorNode (LFO) -> GainNode (Depth) -> frequency (AudioParam)
  lfo.connect(depth);
  depth.connect(lowpass.frequency);

  // Start LFO
  lfo.start(0);

  isStop = false;

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (isStop) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);
  lfo.stop(0);

  oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });
  lfo        = new OscillatorNode(context, { frequency: rateValue });

  isStop = true;

  buttonElement.textContent = 'start';
});

rangeCutoffElement.addEventListener('input', (event) => {
  cutoff = event.currentTarget.valueAsNumber;

  lowpass.frequency.value = cutoff;

  spanPrintCutoffElement.textContent = `${cutoff.toString(10)} Hz`;
});

rangeDepthElement.addEventListener('input', (event) => {
  depthRate = event.currentTarget.valueAsNumber;

  depth.gain.value = lowpass.frequency.value * depthRate;

  spanPrintDepthElement.textContent = depthRate.toString(10);
});

rangeRateElement.addEventListener('input', (event) => {
  rateValue = event.currentTarget.valueAsNumber;

  if (lfo) {
    lfo.frequency.value = rateValue;
  }

  spanPrintRateElement.textContent = rateValue.toString(10);
});

rangeResonanceElement.addEventListener('input', (event) => {
  resonance = event.currentTarget.valueAsNumber;

  lowpass.Q.value = resonance;

  spanPrintResonanceElement.textContent = resonance.toString(10);
});

オートワウ

汎用的なオートワウを実装するためには, WaveShaperNode クラスの理解が必要であったり, ノード接続が複雑であったりするので, このセクションでは, すでに解説した BiquadFilterNode の frequency プロパティ (AudioParam) のオートメーションメソッドを利用した簡易的な実装を解説します (これは, アナログシンセサイザーの VCF (Voltage Controlled Filter: 電圧制御フィルタ) の実装でもあります).

エンベロープジェネレーターと同様のオートメーションを BiquadFilterNode の frequency プロパティに実装することです. そして, それに対応するように, GainNode の gain プロパティにもオートメーションを適用すれば, 同様のスケジューリングで, 振幅に応じて $f_{\mathrm{computed}}$ も変化することになるので, オートワウが実装できます. 現実的には, オートワウが有用なのは, このような, ユーザーインタラクティブな操作に応じて, 振幅の変化とともに, $f_{\mathrm{computed}}$ を変化させればよいケースがほとんどなので, 簡易的なオートワウでも十分なことが多いでしょう.

const context = new AudioContext();

const cutoff       = 1000;
const targetCutoff = 2000;
const resonance    = 10;

const attack  = 1.0;
const decay   = 0.5;
const sustain = 0.5;
const release = 1.0;

const envelopegenerator = new GainNode(context);

let oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });

let isStop = true;

const lowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: cutoff, Q: resonance });

const buttonElement = document.querySelector('button[type="button"]');

buttonElement.addEventListener('mousedown', () => {
  if (!isStop) {
    return;
  }

  // Connect nodes
  // OscillatorNode (Input) -> GainNode (Envelope Generator) -> BiquadFilterNode (Low-Pass Filter) -> AudioDestinationNode (Output)
  oscillator.connect(envelopegenerator);
  envelopegenerator.connect(lowpass);
  lowpass.connect(context.destination);

  const t0 = context.currentTime;
  const t1 = t0 + attack;
  const t2 = decay;

  const t2Level = lowpass.frequency.value * sustain;

  // Attack -> Decay -> Sustain
  envelopegenerator.gain.cancelScheduledValues(t0);
  envelopegenerator.gain.setValueAtTime(0, t0);
  envelopegenerator.gain.linearRampToValueAtTime(1, t1);
  envelopegenerator.gain.setTargetAtTime(sustain, t1, t2);

  lowpass.frequency.cancelScheduledValues(t0);
  lowpass.frequency.setValueAtTime(cutoff, t0);
  lowpass.frequency.exponentialRampToValueAtTime(targetCutoff, t1);
  lowpass.frequency.setTargetAtTime(t2Level, t1, t2);

  // Start oscillator
  oscillator.start(0);

  isStop = false;

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (isStop) {
    return;
  }

  const t3 = context.currentTime;
  const t4 = release;

  // Sustain -> Release
  envelopegenerator.gain.cancelScheduledValues(t3);
  envelopegenerator.gain.setTargetAtTime(0, t3, t4);

  lowpass.frequency.cancelScheduledValues(t3);
  lowpass.frequency.setTargetAtTime(cutoff, t3, t4);

  // Stop after Release
  oscillator.stop(t3 + t4);

  oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });

  isStop = true;

  buttonElement.textContent = 'start';
});

ワウは飛び道具的なエフェクターなので, linearRampToValueAtTime メソッドではなく, exponentialRampToValueAtTime メソッドで指数関数的に変化させてみました (もちろん, 線形的に変化させる linearRampToValueAtTime メソッドでもオートワウとしては機能します).

以下は, 実際のアプリケーションを想定して, ユーザーインタラクティブに, (パラメータのオートメーションによる) オートワウに関わるパラメータを制御できるようにしたコード例です.

<button type="button">start</button>
<label for="range-vcf-auto-wah-attack">attack</label>
<input type="range" id="range-vcf-auto-wah-attack" value="1" min="0" max="1" step="0.01" />
<span id="print-vcf-auto-wah-attack-value">1</span>
<label for="range-vcf-auto-wah-decay">decay</label>
<input type="range" id="range-vcf-auto-wah-decay" value="0.3" min="0" max="1" step="0.01" />
<span id="print-vcf-auto-wah-decay-value">0.3</span>
<label for="range-vcf-auto-wah-sustain">sustain</label>
<input type="range" id="range-vcf-auto-wah-sustain" value="0.5" min="0" max="1" step="0.01" />
<span id="print-vcf-auto-wah-sustain-value">0.5</span>
<label for="range-vcf-auto-wah-release">release</label>
<input type="range" id="range-vcf-auto-wah-release" value="1" min="0" max="1" step="0.01" />
<span id="print-vcf-auto-wah-release-value">1</span>

const context = new AudioContext();

const cutoff       = 1000;
const targetCutoff = 2000;
const resonance    = 10;

let attack  = 1.0;
let decay   = 0.5;
let sustain = 0.5;
let release = 1.0;

const envelopegenerator = new GainNode(context);

let oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });

let isStop = true;

const lowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: cutoff, Q: resonance });

const buttonElement = document.querySelector('button[type="button"]');

const rangeAttackElement  = document.getElementById('range-vcf-auto-wah-attack');
const rangeDecayElement   = document.getElementById('range-vcf-auto-wah-decay');
const rangeSustainElement = document.getElementById('range-vcf-auto-wah-sustain');
const rangeReleaseElement = document.getElementById('range-vcf-auto-wah-release');

const spanPrintAttackElement  = document.getElementById('print-vcf-auto-wah-attack-value');
const spanPrintDecayElement   = document.getElementById('print-vcf-auto-wah-decay-value');
const spanPrintSutainElement  = document.getElementById('print-vcf-auto-wah-sustain-value');
const spanPrintReleaseElement = document.getElementById('print-vcf-auto-wah-release-value');

buttonElement.addEventListener('mousedown', () => {
  if (!isStop) {
    return;
  }

  // Connect nodes
  // OscillatorNode (Input) -> GainNode (Envelope Generator) -> BiquadFilterNode (Low-Pass Filter) -> AudioDestinationNode (Output)
  oscillator.connect(envelopegenerator);
  envelopegenerator.connect(lowpass);
  lowpass.connect(context.destination);

  const t0 = context.currentTime;
  const t1 = t0 + attack;
  const t2 = decay;

  const t2Level = lowpass.frequency.value * sustain;

  // Attack -> Decay -> Sustain
  envelopegenerator.gain.cancelScheduledValues(t0);
  envelopegenerator.gain.setValueAtTime(0, t0);
  envelopegenerator.gain.linearRampToValueAtTime(1, t1);
  envelopegenerator.gain.setTargetAtTime(sustain, t1, t2);

  lowpass.frequency.cancelScheduledValues(t0);
  lowpass.frequency.setValueAtTime(cutoff, t0);
  lowpass.frequency.exponentialRampToValueAtTime(targetCutoff, t1);
  lowpass.frequency.setTargetAtTime(t2Level, t1, t2);

  // Start oscillator
  oscillator.start(0);

  isStop = false;

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (isStop) {
    return;
  }

  const t3 = context.currentTime;
  const t4 = release;

  // Sustain -> Release
  envelopegenerator.gain.cancelAndHoldAtTime(t3);
  envelopegenerator.gain.setTargetAtTime(0, t3, t4);

  lowpass.frequency.cancelAndHoldAtTime(t3);
  lowpass.frequency.setTargetAtTime(cutoff, t3, t4);

  // Stop after Release (+ until nearly zero audio data)
  oscillator.stop(t3 + t4 + 5);

  oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });

  isStop = true;

  buttonElement.textContent = 'start';
});

rangeAttackElement.addEventListener('input', (event) => {
  attack = event.currentTarget.valueAsNumber;

  spanPrintAttackElement.textContent = attack.toString(10);
});

rangeDecayElement.addEventListener('input', (event) => {
  decay = event.currentTarget.valueAsNumber;

  spanPrintDecayElement.textContent = decay.toString(10);
});

rangeSustainElement.addEventListener('input', (event) => {
  sustain = event.currentTarget.valueAsNumber;

  spanPrintSutainElement.textContent = sustain.toString(10);
});

rangeReleaseElement.addEventListener('input', (event) => {
  release = event.currentTarget.valueAsNumber;

  spanPrintReleaseElement.textContent = release.toString(10);
});

汎用的なオートワウ

汎用的なオートワウを実装するためには, WaveShaperNode クラスを理解して, エンベロープフォロワーを実装する必要があるので, ここでは, とりあえず形式的に (以下のように実装すればオートワウができる程度に) 理解していただければだいじょうぶです (WaveShaperNode クラスやエンベロープフォロワーに関しては, ディストーション (歪み系エフェクター) のセクションで詳細を解説します).

const context = new AudioContext();

const depthValue = 0.25;
const rateValue  = 1;

const envelopeFollower = new WaveShaperNode(context, { buffer: new Float32Array([1, 0, 1]) });
const sensitivity      = new BiquadFilterNode(context, { type: 'lowpass', frequency: 2000, Q: 10 });
const lowpass          = new BiquadFilterNode(context, { type: 'lowpass', frequency: 2, Q: 1 });

const oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });
const lfo        = new OscillatorNode(context, { frequency: rateValue });

const depth = new GainNode(context, { gain: 1000 });

const lfoDepth = new GainNode(context, { gain: depthValue });

const amplitude = new GainNode(context, { gain: 0.5 });  // 0.5 +- ${depthValue}

// Connect nodes
// OscillatorNode (Input) -> GainNode (Tremolo) -> BiquadFilterNode (Sensitivity) -> GainNode (Output)
oscillator.connect(amplitude);
amplitude.connect(sensitivity);
sensitivity.connect(context.destination);

// OscillatorNode (Input) -> WaveShaperNode (Envelope Follower) -> WaveShaperNode (Envelope Follower) -> BiquadFilterNode (Low-Pass Filter) -> GainNode (Depth) -> frequency (AudioParam)
oscillator.connect(envelopeFollower);
envelopeFollower.connect(lowpass);
lowpass.connect(depth);
depth.connect(sensitivity.frequency);

lfo.connect(lfoDepth);
lfoDepth.connect(amplitude.gain);

// Start oscillator
oscillator.start(0);
lfo.start(0);

// Stop oscillator
oscillator.stop(context.currentTime + 5);
lfo.stop(context.currentTime + 5);

音源の振幅の変化をシミュレートするために, トレモロを使っています (したがって, ここでのトレモロは, オートワウの実装には直接的に関係ありません).

ノード接続は, 大きく 2 つで構成されています. 1 つは, 音源と振幅に対する感度のための Low-Pass Filter, そして AudioDestinationNode の接続と, もう 1 つは, 音源の振幅をエンベロープフォロワーに接続することによって, 全波整流 (端的には, 振幅の絶対値に波形を整形する処理) を施し, それをもとに, 感度の Low-Pass Filter の frequency プロパティを振幅に応じて変化させるための (AudioParam への) 接続です.

全波整流した原音を, カットオフ周波数が非常に低い Low-Pass Filter を通過させることで, 波形 (エンベロープ) ではなく, 振幅の変化を出力とします. あとは, 振幅に応じて Depth の値が変化するようにすれば, Sensitivity の Low-Pass Filter の $f_{\mathrm{computed}}$ が原音の振幅の変化に応じて変化することになり, (汎用的な) オートワウが実装できます.

以下は, 実際のアプリケーションを想定して, ユーザーインタラクティブに, オートワウに関わるパラメータを制御できるようにしたコード例です. 原音はハードコーディングしていますが, OscillatorNode だけでなく, ワンショットオーディオや MediaStreamAudioSourceNode をオーディオソースとして音声に適用するのもおもしろいかもしれません.

<button type="button">start</button>
<label>
  <input type="checkbox" id="checkbox-auto-wah" checked />
  <span id="print-checked-auto-wah">ON</span>
</label>
<label for="range-auto-wah-sensitivity">Sensitivity</label>
<input type="range" id="range-auto-wah-sensitivity" value="1000" min="1000" max="2000" step="1" />
<span id="print-auto-wah-sensitivity-value">1000 Hz</span>
<label for="range-auto-wah-depth">Depth</label>
<input type="range" id="range-auto-wah-depth" value="0.5" min="0" max="1" step="0.05" />
<span id="print-auto-wah-depth-value">0.5</span>
<label for="range-auto-wah-resonance">Resonance</label>
<input type="range" id="range-auto-wah-resonance" value="10" min="1" max="40" step="1" />
<span id="print-auto-wah-resonance-value">10</span>

const context = new AudioContext();

let sensitivityFrequency = 2000;
let sensitivityDepthRate = 0.5;
let sensitivityResonance = 10;

const tremoloDepthValue = 0.25;
const tremoloRateValue  = 1;

let oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });
let lfo        = new OscillatorNode(context, { frequency: tremoloRateValue });

// for Tremolo (simulates amplitude modulation)
const lfoDepth  = new GainNode(context, { gain: tremoloDepthValue });
const amplitude = new GainNode(context, { gain: 0.5 });  // 0.5 +- ${tremoloDepthValue}

lfo.connect(lfoDepth);
lfoDepth.connect(amplitude.gain);

// Start LFO (simulates amplitude modulation)
lfo.start(0);

const envelopeFollower = new WaveShaperNode(context, { buffer: new Float32Array([1, 0, 1]) });
const sensitivity      = new BiquadFilterNode(context, { type: 'lowpass', frequency: sensitivityFrequency, Q: sensitivityResonance });
const lowpass          = new BiquadFilterNode(context, { type: 'lowpass', frequency: 2, Q: 1 });

const depth = new GainNode(context, { gain: sensitivity.frequency.value * sensitivityDepthRate });

let isStop = true;

const buttonElement   = document.querySelector('button[type="button"]');
const checkboxElement = document.querySelector('input[type="checkbox"]');

const rangeSensitivityFrequencyElement = document.getElementById('range-auto-wah-sensitivity');
const rangeSensitivityDepthElement     = document.getElementById('range-auto-wah-depth');
const rangeResonanceElement            = document.getElementById('range-auto-wah-resonance');

const spanPrintCheckedElement              = document.getElementById('print-checked-auto-wah');
const spanPrintSensitivityFrequencyElement = document.getElementById('print-auto-wah-sensitivity-value');
const spanPrintDepthElement                = document.getElementById('print-auto-wah-depth-value');
const spanPrintResonanceElement            = document.getElementById('print-auto-wah-resonance-value');

checkboxElement.addEventListener('click', () => {
  oscillator.disconnect(0);
  sensitivity.disconnect(0);
  envelopeFollower.disconnect(0);
  lowpass.disconnect(0);
  depth.disconnect(0);

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> GainNode (Tremolo) -> BiquadFilterNode (Sensitivity) -> GainNode (Output)
    oscillator.connect(amplitude);
    amplitude.connect(sensitivity);
    sensitivity.connect(context.destination);

    // OscillatorNode (Input) -> WaveShaperNode (Envelope Follower) -> BiquadFilterNode (Low-Pass Filter) -> GainNode (Depth) -> frequency (AudioParam)
    oscillator.connect(envelopeFollower);
    envelopeFollower.connect(lowpass);
    lowpass.connect(depth);
    depth.connect(sensitivity.frequency);

    spanPrintCheckedElement.textContent = 'ON';
  } else {
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    spanPrintCheckedElement.textContent = 'OFF';
  }
});

buttonElement.addEventListener('mousedown', () => {
  if (!isStop) {
    return;
  }

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> GainNode (Tremolo) -> BiquadFilterNode (Sensitivity) -> GainNode (Output)
    oscillator.connect(amplitude);
    amplitude.connect(sensitivity);
    sensitivity.connect(context.destination);

    // OscillatorNode (Input) -> WaveShaperNode (Envelope Follower) -> BiquadFilterNode (Low-Pass Filter) -> GainNode (Depth) -> frequency (AudioParam)
    oscillator.connect(envelopeFollower);
    envelopeFollower.connect(lowpass);
    lowpass.connect(depth);
    depth.connect(sensitivity.frequency);

    // Start oscillator
    oscillator.start(0);
  } else {
    oscillator.disconnect(0);

    // Connect nodes (Auto Wah OFF)
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    // Start oscillator
    oscillator.start(0);
  }

  isStop = false;

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (isStop) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);

  oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: 440 });

  isStop = true;

  buttonElement.textContent = 'start';
});

rangeSensitivityFrequencyElement.addEventListener('input', (event) => {
  sensitivityFrequency = event.currentTarget.valueAsNumber;

  sensitivity.frequency.value = sensitivityFrequency;

  spanPrintSensitivityFrequencyElement.textContent = `${sensitivityFrequency.toString(10)} Hz`;
});

rangeSensitivityDepthElement.addEventListener('input', (event) => {
  sensitivityDepthRate = event.currentTarget.valueAsNumber;

  depth.gain.value = sensitivityFrequency * sensitivityDepthRate;

  spanPrintDepthElement.textContent = sensitivityDepthRate.toString(10);
});

rangeResonanceElement.addEventListener('input', (event) => {
  sensitivityResonance = event.currentTarget.valueAsNumber;

  sensitivity.Q.value = sensitivityResonance;

  spanPrintResonanceElement.textContent = sensitivityResonance.toString(10);
});

WaveShaperNode

ディストーションサウンドの原理は, 周波数領域でみると, 原音には存在しない周波数成分を発生させる非線形処理が原理となっています. これを, 時間領域の波形でみると, 意図的な音割れを発生させるクリッピングが原理となっています.

波形を単純にクリッピングしただけでは, ディストーションサウンドではなく, 音割れっぽくなってしまうことや, 非線形処理によって折り返し歪み (エイリアス歪み) が発生するのを防ぐためのオーバーサンプル処理などを抽象化するのが, WaveShaperNode クラスです.

curve プロパティと oversample プロパティが理解できれば, WaveShaperNode インスタンス生成して接続するだけです (ファクトリメソッドでインスタンスを生成する場合は, AudioContext インスタンスの createWaveShaper メソッドを呼び出します).

const context = new AudioContext();

const curve = new Float32Array(4096);

const amount = 0.7;

const k = (2 * amount) / (1 - amount);

for (let n = 0, numberOfSamples = curve.length; n < numberOfSamples; n++) {
  const x = (((n - 0) * (1 - (-1))) / (numberOfSamples - 0)) + (-1);
  const y = ((1 + k) * x) / (1 + (k * Math.abs(x)));

  curve[n] = y;
}

const shaper = new WaveShaperNode(context, { curve, oversample: '2x' });

// If use `createWaveShaper`
// const shaper = context.createWaveShaper();
//
// shaper.curve      = curve;
// shaper.oversample = '2x';

const oscillator = new OscillatorNode(context);

// Connect nodes
// OscillatorNode (Input) -> WaveShaperNode (Clipping) -> AudioDestinationNode (Output)
oscillator.connect(shaper);
shaper.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 10 sec
oscillator.stop(context.currentTime + 10);

非対称クリッピング

クリッピングカーブでも紹介したオーバードライブカーブでも Overdrive を実装することは可能ですが, Overdrive によっては, クリッピング後の波形が非対称となる非対称クリッピングで実装されていることも多いのでこのセクションで解説します (ちなみに, BOSS OD-1 Overdrive も非対称クリッピング回路が利用されています).

非対称クリッピングすることによって, 奇数次の倍音成分だけではなく, 偶数次の倍音成分も発生するので (端的には, 倍音成分が増えるので), ハイゲインよりの Overdrive を生成することが可能となります.

したがって, オーバードライブカーブをもとに, 非対称のクリッピングになるように, 正負の判定を追加して非対称になるように設定します. 非対称クリッピングカーブの形状は, クリッピングカーブで Curve Type を Overdrive (Asymmetrical) に選択すると確認できます.

const context = new AudioContext();

const curve = new Float32Array(4096);

const amount = 0.7;

const k = (2 * amount) / (1 - amount);

for (let n = 0, numberOfSamples = curve.length; n < numberOfSamples; n++) {
  const x = (((n - 0) * (1 - (-1))) / (numberOfSamples - 0)) + (-1);
  const y = ((1 + k) * x) / (1 + (k * Math.abs(x)));

  // Asymmetrical clipping curve
  curve[n] = (y > 0) ? y : ((1 - ((amount > 0.5) ? 0.5 : amount)) * y);
}

const shaper = new WaveShaperNode(context, { curve, oversample: '2x' });

// If use `createWaveShaper`
// const shaper = context.createWaveShaper();
//
// shaper.curve      = curve;
// shaper.oversample = '2x';

const oscillator = new OscillatorNode(context);

// Connect nodes
// OscillatorNode (Input) -> WaveShaperNode (Clipping) -> AudioDestinationNode (Output)
oscillator.connect(shaper);
shaper.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 10 sec
oscillator.stop(context.currentTime + 10);

また, 対称性に関わらず, Overdrive のクリッピングカーブは滑らかな曲線を設定することが多く, ソフトクリッピングされた波形となります (逆に, Distortion や Fuzz などは, 急峻に変化する曲線や非線形に直線を組み合わせた設定にすることが多く, ハードクリッピングされた波形となります).

全波整流・半波整流

最も激しい歪みに分類される Fuzz では, クリッピングだけでなく, 絶対値をとる全波整流, あるいは, 負数となる振幅を 0 にする半波整流が実装されていることが多いです (ちなみに, 「整流器」を英語に訳すと「Rectifier」ですが, ハイゲイン真空管アンプで有名な Mesa/Boogie 社の Dual Rectifier などはこれに由来します)

整流のクリッピングカーブ (curve プロパティの値) は直線の組み合わせなので, 手動的に設定できます. 全波整流であれば new Float32Array([1, 0, 1]), 半波整流であれば new Float32Array([0, 0, 1]) を設定します (全波整流は, オートワウのセクションで解説した, エンベロープフォロワーでもあります). クリッピングカーブの形状は, クリッピングカーブで Curve Type を Full Wave Rectifier, または, Half Wave Rectifier に選択すると確認できます.

Fuzz では, 整流とハードクリッピングを組み合わせるので, 整流のクリッピングカーブの Float32Array の 1 となっている値をハードクリッピングする値に設定します.

例えば, 0.5 でハードクリッピングする場合, 全波整流であれば new Float32Array([0.5, 0, 0.5]), 半波整流であれば new Float32Array([0, 0, 0.5])) に設定すれば, 整流とハードクリッピングを組み合わせたクリッピングカーブとなります. クリッピングカーブの形状は, クリッピングカーブで Curve Type を Full Wave Rectifier + Hard Clipping, または, Half Wave Rectifier + Hard Clipping に選択して, Clipping Level の値を変更することで確認できます.

const context = new AudioContext();

const level = 0.5;

// Full Wave Rectifier
const curve = new Float32Array([level, 0, level]);

// If use Half Wave Rectifier
// const curve = new Float32Array([0, 0, level]);

const shaper = new WaveShaperNode(context, { curve, oversample: '4x' });

// If use `createWaveShaper`
// const shaper = context.createWaveShaper();
//
// shaper.curve      = curve;
// shaper.oversample = '4x';

const oscillator = new OscillatorNode(context);

// Connect nodes
// OscillatorNode (Input) -> WaveShaperNode (Clipping) -> AudioDestinationNode (Output)
oscillator.connect(shaper);
shaper.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 10 sec
oscillator.stop(context.currentTime + 10);

プリアンプ

Marshall ライクなプリアンプの特徴として, 2 つのクリッピング処理による歪みと, クリッピングのプリプロセスとなる High-Pass Filter と Low-Pass Filter によるフィルタ処理, また, 2 つのクリッピングの間にもフィルタ処理があること, そして, クリッピングのポストプロセスとしてポストイコライザーがあることです. さらに, 中低域のゲインコントロールと, 高音域のゲインコントロールがあります.

まずは, プリプロセスとなるフィルタ処理を実装します.

const context = new AudioContext();

const preLowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: 3200, Q: -3 });

const preHighpass1 = new BiquadFilterNode(context, { type: 'highpass', frequency:  80, Q: -3 });
const preHighpass2 = new BiquadFilterNode(context, { type: 'highpass', frequency: 640, Q: -3 });
const preHighpass3 = new BiquadFilterNode(context, { type: 'highpass', frequency: 160, Q: -3 });

const middleAndBassGain = new GainNode(context, { gain: 0.5 });
const highTrebleGain    = new GainNode(context, { gain: 0.5 });

// (AudioSourceNode ->) GainNode (Input) -> BiquadFilterNode (High-Pass Filter) -> BiquadFilterNode (Low-Pass Filter) -> GainNode (Middle and Low Gain) -> BiquadFilterNode (High-Pass Filter)
preHighpass1.connect(preLowpass);
preLowpass.connect(middleAndBassGain);
middleAndBassGain.connect(preHighpass3);

// (AudioSourceNode ->) BiquadFilterNode (High-Pass Filter) -> GainNode (High Treble Gain) -> BiquadFilterNode (High-Pass Filter)
preHighpass2.connect(highTrebleGain);
highTrebleGain.connect(preHighpass3);

// ...

次に, 前段の歪みを生成するクリッピング処理を実装します.

function createCurve(drive, numberOfSamples) {
  const curves = new Float32Array(numberOfSamples);

  const index = Math.trunc((numberOfSamples - 1) / 2);

  const d = (10 ** ((drive / 5.0) - 1.0)) - 0.1;
  const c = (d / 5.0) + 1.0;

  let peak = 0.4;

  if (c === 1) {
    peak = 1.0;
  } else if ((c > 1) && (c < 1.04)) {
    peak = (-15.5 * c) + 16.52;
  }

  for (let i = 0; i < index; i++) {
    curves[index + i] = peak * (((+1) - (c ** (-i))) + ((i * (c ** (-index))) / index));
    curves[index - i] = peak * (((-1) + (c ** (-i))) - ((i * (c ** (-index))) / index));
  }

  curves[index] = 0;

  return curves;
}

// If `drive` is about `3`, distortion sound is Crunch.
// If `drive` is about `5`, distortion sound is Overdrive.
// If `drive` is about `8`, distortion sound is Distortion.
const drive   = 5;
const samples = 127;

const curve      = createCurve(drive, samples);
const oversample = '4x';

const preShaper = new WaveShaperNode(context, { curve, oversample });

// (... ->) BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Pre Clipping)
preHighpass3.connect(preShaper);

// ...

そして, 前段の歪み後段の歪みの間のフィルタ処理を実装します.

const lowpass  = new BiquadFilterNode(context, { type: 'lowpass',  frequency: 4000, Q: -3 });
const highpass = new BiquadFilterNode(context, { type: 'highpass', frequency:   40, Q: -3 });

// (... ->) WaveShaperNode (Pre Clipping) -> BiquadFilterNode (Low-Pass Filter) -> BiquadFilterNode (High-Pass Filter)
preShaper.connect(lowpass);
lowpass.connect(highpass);

// ...

後段の歪みを生成するクリッピング処理を実装します (このクリッピングカーブは前段と同じです).

const postShaper = new WaveShaperNode(context, { curve, oversample });

// (... ->) BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Post Clipping)
highpass.connect(postShaper);

// ...

最後は, ポストイコライザーの実装ですが, これはすでに解説している 3 バンドイコライザーを追加するだけです.

const bass   = new BiquadFilterNode(context, { type: 'lowshelf',  frequency:  240 });
const middle = new BiquadFilterNode(context, { type: 'peaking',   frequency:  500, Q: 1.5 });
const treble = new BiquadFilterNode(context, { type: 'highshelf', frequency: 1600 });

// (... ->) WaveShaperNode (Post Clipping) -> Post Equalizer (Low-Shelving Filter -> Peaking Filter -> High-Shelving Filter) -> AudioDestinationNode (Output)
postShaper.connect(bass);
bass.connect(middle);
middle.connect(treble);
treble.connect(context.destination);

ここまでのコードを網羅して記載すると, 以下のようになります.

function createCurve(drive, numberOfSamples) {
  const curves = new Float32Array(numberOfSamples);

  const index = Math.trunc((numberOfSamples - 1) / 2);

  const d = (10 ** ((drive / 5.0) - 1.0)) - 0.1;
  const c = (d / 5.0) + 1.0;

  let peak = 0.4;

  if (c === 1) {
    peak = 1.0;
  } else if ((c > 1) && (c < 1.04)) {
    peak = (-15.5 * c) + 16.52;
  }

  for (let i = 0; i < index; i++) {
    curves[index + i] = peak * (((+1) - (c ** (-i))) + ((i * (c ** (-index))) / index));
    curves[index - i] = peak * (((-1) + (c ** (-i))) - ((i * (c ** (-index))) / index));
  }

  curves[index] = 0;

  return curves;
}

const context = new AudioContext();

const preLowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: 3200, Q: -3 });

const preHighpass1 = new BiquadFilterNode(context, { type: 'highpass', frequency:  80, Q: -3 });
const preHighpass2 = new BiquadFilterNode(context, { type: 'highpass', frequency: 640, Q: -3 });
const preHighpass3 = new BiquadFilterNode(context, { type: 'highpass', frequency: 160, Q: -3 });

const middleAndBassGain = new GainNode(context, { gain: 0.5 });
const highTrebleGain    = new GainNode(context, { gain: 0.5 });

// If `drive` is about `3`, distortion sound is Crunch.
// If `drive` is about `5`, distortion sound is Overdrive.
// If `drive` is about `8`, distortion sound is Distortion.
const drive   = 5;
const samples = 127;

const curve      = createCurve(drive, samples);
const oversample = '4x';

const preShaper  = new WaveShaperNode(context, { curve, oversample });
const postShaper = new WaveShaperNode(context, { curve, oversample });

const lowpass  = new BiquadFilterNode(context, { type: 'lowpass',  frequency: 4000, Q: -3 });
const highpass = new BiquadFilterNode(context, { type: 'highpass', frequency:   40, Q: -3 });

const bass   = new BiquadFilterNode(context, { type: 'lowshelf',  frequency:  240 });
const middle = new BiquadFilterNode(context, { type: 'peaking',   frequency:  500, Q: 1.5 });
const treble = new BiquadFilterNode(context, { type: 'highshelf', frequency: 1600 });

// (AudioSourceNode ->) GainNode (Input) -> BiquadFilterNode (High-Pass Filter) -> BiquadFilterNode (Low-Pass Filter) -> GainNode (Middle and Low Gain) -> BiquadFilterNode (High-Pass Filter)
preHighpass1.connect(preLowpass);
preLowpass.connect(middleAndBassGain);
middleAndBassGain.connect(preHighpass3);

// (AudioSourceNode ->) BiquadFilterNode (High-Pass Filter) -> GainNode (High Treble Gain) -> BiquadFilterNode (High-Pass Filter)
preHighpass2.connect(highTrebleGain);
highTrebleGain.connect(preHighpass3);

// BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Pre Clipping)
preHighpass3.connect(preShaper);

// WaveShaperNode (Pre Clipping) -> BiquadFilterNode (Low-Pass Filter) -> BiquadFilterNode (High-Pass Filter)
preShaper.connect(lowpass);
lowpass.connect(highpass);

// BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Post Clipping)
highpass.connect(postShaper);

// WaveShaperNode (Post Clipping) -> Post Equalizer (Low-Shelving Filter -> Peaking Filter -> High-Shelving Filter) -> AudioDestinationNode (Output)
postShaper.connect(bass);
bass.connect(middle);
middle.connect(treble);
treble.connect(context.destination);

ここまでで, Marshall ライクなプリアンプが実装できたので, エレキギターのクリーントーンのワンショットオーディオを利用して, プリアンプで歪ませたディストーションサウンドを聴いてみてください (プリアンプによるディストーションサウンドは, 多段のフィルタやクリッピングによって, どうしても音が大きくなってしまうので, 最終的な音量を調整できるように, Master Volume となる GainNode を出力前に接続しています).

function createCurve(drive, numberOfSamples) {
  const curves = new Float32Array(numberOfSamples);

  const index = Math.trunc((numberOfSamples - 1) / 2);

  const d = (10 ** ((drive / 5.0) - 1.0)) - 0.1;
  const c = (d / 5.0) + 1.0;

  let peak = 0.4;

  if (c === 1) {
    peak = 1.0;
  } else if ((c > 1) && (c < 1.04)) {
    peak = (-15.5 * c) + 16.52;
  }

  for (let i = 0; i < index; i++) {
    curves[index + i] = peak * (((+1) - (c ** (-i))) + ((i * (c ** (-index))) / index));
    curves[index - i] = peak * (((-1) + (c ** (-i))) - ((i * (c ** (-index))) / index));
  }

  curves[index] = 0;

  return curves;
}

const context = new AudioContext();

const mastervolume = new GainNode(context, { gain: 0.3 });

const preLowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: 3200, Q: -3 });

const preHighpass1 = new BiquadFilterNode(context, { type: 'highpass', frequency:  80, Q: -3 });
const preHighpass2 = new BiquadFilterNode(context, { type: 'highpass', frequency: 640, Q: -3 });
const preHighpass3 = new BiquadFilterNode(context, { type: 'highpass', frequency: 160, Q: -3 });

const middleAndBassGain = new GainNode(context, { gain: 0.5 });
const highTrebleGain    = new GainNode(context, { gain: 0.5 });

// If `drive` is about `3`, distortion sound is Crunch.
// If `drive` is about `5`, distortion sound is Overdrive.
// If `drive` is about `8`, distortion sound is Distortion.
const drive   = 5;
const samples = 127;

const curve      = createCurve(drive, samples);
const oversample = '4x';

const preShaper  = new WaveShaperNode(context, { curve, oversample });
const postShaper = new WaveShaperNode(context, { curve, oversample });

const lowpass  = new BiquadFilterNode(context, { type: 'lowpass',  frequency: 4000, Q: -3 });
const highpass = new BiquadFilterNode(context, { type: 'highpass', frequency:   40, Q: -3 });

const bass   = new BiquadFilterNode(context, { type: 'lowshelf',  frequency:  240 });
const middle = new BiquadFilterNode(context, { type: 'peaking',   frequency:  500, Q: 1.5 });
const treble = new BiquadFilterNode(context, { type: 'highshelf', frequency: 1600 });

fetch('./assets/one-shots/electric-guitar-clean-chord.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then((arrayBuffer) => {
    const successCallback = (audioBuffer) => {
      const source = new AudioBufferSourceNode(context, { buffer: audioBuffer });

      // AudioBufferSourceNode (Input) -> BiquadFilterNode (High-Pass Filter) -> BiquadFilterNode (Low-Pass Filter) -> GainNode (Middle and Low Gain) -> BiquadFilterNode (High-Pass Filter)
      source.connect(preHighpass1);
      preHighpass1.connect(preLowpass);
      preLowpass.connect(middleAndBassGain);
      middleAndBassGain.connect(preHighpass3);

      // AudioBufferSourceNode (Input) -> BiquadFilterNode (High-Pass Filter) -> GainNode (High Treble Gain) -> BiquadFilterNode (High-Pass Filter)
      source.connect(preHighpass2);
      preHighpass2.connect(highTrebleGain);
      highTrebleGain.connect(preHighpass3);

      // BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Pre Clipping)
      preHighpass3.connect(preShaper);

      // WaveShaperNode (Pre Clipping) -> BiquadFilterNode (Low-Pass Filter) -> BiquadFilterNode (High-Pass Filter)
      preShaper.connect(lowpass);
      lowpass.connect(highpass);

      // BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Post Clipping)
      highpass.connect(postShaper);

      // WaveShaperNode (Post Clipping) -> Post Equalizer (Low-Shelving Filter -> Peaking Filter -> High-Shelving Filter) -> GainNode (Master Volume)
      postShaper.connect(bass);
      bass.connect(middle);
      middle.connect(treble);
      treble.connect(mastervolume);

      // GainNode (Master Volume) -> AudioDestinationNode (Output)
      mastervolume.connect(context.destination);

      source.start(0);
    };

    const errorCallback = (error) => {
      // error handling
    };

    context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
  })
  .catch((error) => {
    // error handling
  });

キャビネットとスピーカーシミュレーター

プリアンプで生成された音は, 実際のアンプ, 特に, スタックアンプのような, キャビネットとそれに内蔵されているスピーカーから発生するような音にはなりません. それを再現するために, アンプシミュレーターではプリアンプだけでなく, キャビネットのタイプやスピーカーのサイズや数 (例えば, 12 インチを 4 つなど) を選択できる, 音楽的な表現だと, いわゆる, 箱鳴り感を再現できる, スピーカーシミュレーターも含まれています.

実際に存在するキャビネットとスピーカーをシミュレートするには, キャビネット内のインパルス応答を測定したオーディオデータと ConvolverNode を利用して実装するのがベストです. しかしながら, RIR と異なって, フリーで使える音源が少ないことも考慮して, 簡易的なスピーカーシミュレーターの実装を解説します (簡易的なスピーカーシミュレーターでも, 箱鳴り感は十分再現できます).

簡易的なスピーカーシミュレーターの実装であれば, Low-Pass Filter と Notch Filter を接続することで実装できます.

const context = new AudioContext();

const speakerSimulatorNotch   = new BiquadFilterNode(context, { type: 'notch',   frequency: 8000, Q: 1 });
const speakerSimulatorLowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: 3200, Q: 6 });

// BiquadFilterNode (Notch Filter) -> BiquadFilterNode (Low-Pass Filter)
speakerSimulatorNotch.connect(speakerSimulatorLowpass);

スピーカーシミュレーターのノード接続を, プリアンプの次に接続します. (プリアンプとスピーカーシミュレーターの処理の後の音量を調整できるように, Master Volume となる GainNode の接続は, スピーカーシミュレーターの後に変更します. つまり, スピーカーシミュレーターの接続先となります).

function createCurve(drive, numberOfSamples) {
  const curves = new Float32Array(numberOfSamples);

  const index = Math.trunc((numberOfSamples - 1) / 2);

  const d = (10 ** ((drive / 5.0) - 1.0)) - 0.1;
  const c = (d / 5.0) + 1.0;

  let peak = 0.4;

  if (c === 1) {
    peak = 1.0;
  } else if ((c > 1) && (c < 1.04)) {
    peak = (-15.5 * c) + 16.52;
  }

  for (let i = 0; i < index; i++) {
    curves[index + i] = peak * (((+1) - (c ** (-i))) + ((i * (c ** (-index))) / index));
    curves[index - i] = peak * (((-1) + (c ** (-i))) - ((i * (c ** (-index))) / index));
  }

  curves[index] = 0;

  return curves;
}

const context = new AudioContext();

const mastervolume = new GainNode(context, { gain: 0.3 });

const preLowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: 3200, Q: -3 });

const preHighpass1 = new BiquadFilterNode(context, { type: 'highpass', frequency:  80, Q: -3 });
const preHighpass2 = new BiquadFilterNode(context, { type: 'highpass', frequency: 640, Q: -3 });
const preHighpass3 = new BiquadFilterNode(context, { type: 'highpass', frequency: 160, Q: -3 });

const middleAndBassGain = new GainNode(context, { gain: 0.5 });
const highTrebleGain    = new GainNode(context, { gain: 0.5 });

// If `drive` is about `3`, distortion sound is Crunch.
// If `drive` is about `5`, distortion sound is Overdrive.
// If `drive` is about `8`, distortion sound is Distortion.
const drive   = 5;
const samples = 127;

const curve      = createCurve(drive, samples);
const oversample = '4x';

const preShaper  = new WaveShaperNode(context, { curve, oversample });
const postShaper = new WaveShaperNode(context, { curve, oversample });

const lowpass  = new BiquadFilterNode(context, { type: 'lowpass',  frequency: 4000, Q: -3 });
const highpass = new BiquadFilterNode(context, { type: 'highpass', frequency:   40, Q: -3 });

const bass   = new BiquadFilterNode(context, { type: 'lowshelf',  frequency:  240 });
const middle = new BiquadFilterNode(context, { type: 'peaking',   frequency:  500, Q: 1.5 });
const treble = new BiquadFilterNode(context, { type: 'highshelf', frequency: 1600 });

const speakerSimulatorNotch   = new BiquadFilterNode(context, { type: 'notch',   frequency: 8000, Q: 1 });
const speakerSimulatorLowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: 3200, Q: 6 });

fetch('./assets/one-shots/electric-guitar-clean-chord.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then((arrayBuffer) => {
    const successCallback = (audioBuffer) => {
      const source = new AudioBufferSourceNode(context, { buffer: audioBuffer });

      // Preamp
      // AudioBufferSourceNode (Input) -> BiquadFilterNode (High-Pass Filter) -> BiquadFilterNode (Low-Pass Filter) -> GainNode (Middle and Low Gain) -> BiquadFilterNode (High-Pass Filter)
      source.connect(preHighpass1);
      preHighpass1.connect(preLowpass);
      preLowpass.connect(middleAndBassGain);
      middleAndBassGain.connect(preHighpass3);

      // AudioBufferSourceNode (Input) -> BiquadFilterNode (High-Pass Filter) -> GainNode (High Treble Gain) -> BiquadFilterNode (High-Pass Filter)
      source.connect(preHighpass2);
      preHighpass2.connect(highTrebleGain);
      highTrebleGain.connect(preHighpass3);

      // BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Pre Clipping)
      preHighpass3.connect(preShaper);

      // WaveShaperNode (Pre Clipping) -> BiquadFilterNode (Low-Pass Filter) -> BiquadFilterNode (High-Pass Filter)
      preShaper.connect(lowpass);
      lowpass.connect(highpass);

      // BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Post Clipping)
      highpass.connect(postShaper);

      // WaveShaperNode (Post Clipping) -> Post Equalizer (Low-Shelving Filter -> Peaking Filter -> High-Shelving Filter) -> BiquadFilterNode (Speaker Simulator)
      postShaper.connect(bass);
      bass.connect(middle);
      middle.connect(treble);
      treble.connect(speakerSimulatorNotch);

      // Speaker Simulator
      // BiquadFilterNode (Notch Filter) -> BiquadFilterNode (Low-Pass Filter) -> GainNode (Master Volume);
      speakerSimulatorNotch.connect(speakerSimulatorLowpass);
      speakerSimulatorLowpass.connect(mastervolume);

      // GainNode (Master Volume) -> AudioDestinationNode (Output)
      mastervolume.connect(context.destination);

      source.start(0);
    };

    const errorCallback = (error) => {
      // error handling
    };

    context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
  })
  .catch((error) => {
    // error handling
  });

function createCurve(drive, numberOfSamples) {
  const curves = new Float32Array(numberOfSamples);

  const index = Math.trunc((numberOfSamples - 1) / 2);

  const d = (10 ** ((drive / 5.0) - 1.0)) - 0.1;
  const c = (d / 5.0) + 1.0;

  let peak = 0.4;

  if (c === 1) {
    peak = 1.0;
  } else if ((c > 1) && (c < 1.04)) {
    peak = (-15.5 * c) + 16.52;
  }

  for (let i = 0; i < index; i++) {
    curves[index + i] = peak * (((+1) - (c ** (-i))) + ((i * (c ** (-index))) / index));
    curves[index - i] = peak * (((-1) + (c ** (-i))) - ((i * (c ** (-index))) / index));
  }

  curves[index] = 0;

  return curves;
}

const context = new AudioContext();

const mastervolume = new GainNode(context, { gain: 0.3 });

const preLowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: 3200, Q: -3 });

const preHighpass1 = new BiquadFilterNode(context, { type: 'highpass', frequency:  80, Q: -3 });
const preHighpass2 = new BiquadFilterNode(context, { type: 'highpass', frequency: 640, Q: -3 });
const preHighpass3 = new BiquadFilterNode(context, { type: 'highpass', frequency: 160, Q: -3 });

const middleAndBassGain = new GainNode(context, { gain: 0.5 });
const highTrebleGain    = new GainNode(context, { gain: 0.5 });

// If `drive` is about `3`, distortion sound is Crunch.
// If `drive` is about `5`, distortion sound is Overdrive.
// If `drive` is about `8`, distortion sound is Distortion.
const drive   = 5;
const samples = 127;

const curve      = createCurve(drive, samples);
const oversample = '4x';

const preShaper  = new WaveShaperNode(context, { curve, oversample });
const postShaper = new WaveShaperNode(context, { curve, oversample });

const lowpass  = new BiquadFilterNode(context, { type: 'lowpass',  frequency: 4000, Q: -3 });
const highpass = new BiquadFilterNode(context, { type: 'highpass', frequency:   40, Q: -3 });

const bass   = new BiquadFilterNode(context, { type: 'lowshelf',  frequency:  240 });
const middle = new BiquadFilterNode(context, { type: 'peaking',   frequency:  500, Q: 1.5 });
const treble = new BiquadFilterNode(context, { type: 'highshelf', frequency: 1600 });

const speakerSimulator = new ConvolverNode(context);

// Set instance of `AudioBuffer` that is audio data in cabinet to `buffer` property
// speakerSimulator.buffer = audioBuffer;

// (AudioSourceNode ->) BiquadFilterNode (High-Pass Filter) -> BiquadFilterNode (Low-Pass Filter) -> GainNode (Middle and Low Gain) -> BiquadFilterNode (High-Pass Filter)
preHighpass1.connect(preLowpass);
preLowpass.connect(middleAndBassGain);
middleAndBassGain.connect(preHighpass3);

// (AudioSourceNode ->) BiquadFilterNode (High-Pass Filter) -> GainNode (High Treble Gain) -> BiquadFilterNode (High-Pass Filter)
preHighpass2.connect(highTrebleGain);
highTrebleGain.connect(preHighpass3);

// BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Pre Clipping)
preHighpass3.connect(preShaper);

// WaveShaperNode (Pre Clipping) -> BiquadFilterNode (Low-Pass Filter) -> BiquadFilterNode (High-Pass Filter)
preShaper.connect(lowpass);
lowpass.connect(highpass);

// BiquadFilterNode (High-Pass Filter) -> WaveShaperNode (Post Clipping)
highpass.connect(postShaper);

// WaveShaperNode (Post Clipping) -> Post Equalizer (Low-Shelving Filter -> Peaking Filter -> High-Shelving Filter) -> ConvolverNode (Speaker Simulator)
postShaper.connect(bass);
bass.connect(middle);
middle.connect(treble);
treble.connect(speakerSimulator);

// ConvolverNode (Speaker Simulator) -> GainNode (Master Volume)
speakerSimulator.connect(mastervolume);

// GainNode (Master Volume) -> AudioDestinationNode (Output)
mastervolume.connect(context.destination);

アンプシミュレーターと歪み系エフェクターによるディストーションサウンド

ここまでで, アンプ (アンプシミュレーター) と歪み系エフェクターによるディストーションサウンドを解説したので, それらを組み合わせて, さらに, ハードコーディングしていたパラメータをインタラクティブに制御できるようにしたコード例です.

<div>
  <button type="button" id="button-picking-down" data-index="0">Picking Down</button>
  <button type="button" id="button-picking-up"   data-index="1">Picking Up</button>
  <button type="button" id="button-chord"        data-index="2">Chord</button>
</div>
<dl>
  <dt><label for="select-distortion-type">Overdrive / Fuzz</label></dt>
  <dd>
    <select id="select-distortion-type">
      <option value="" selected>none</option>
      <option value="overdrive">Overdrive</option>
      <option value="fuzz">Fuzz</option>
    </select>
  </dd>
  <dt><label for="range-distortion-drive">Drive</label></dt>
  <dd>
    <input type="range" id="range-distortion-drive" value="0.5" min="0" max="0.95" step="0.05" disabled />
    <span id="print-distortion-drive-value">0.5</span>
  </dd>
</dl>
<dl>
  <dt>
    <label for="checkbox-preamp"><span>Preamp</span></label>
  </dt>
  <dd><input type="checkbox" id="checkbox-preamp" checked /></dd>
</dl>
<dl>
  <dt><label for="range-preamp-normal-gain">Normal Gain (Middle and Low Gain)</label></dt>
  <dd>
    <input type="range" id="range-preamp-normal-gain" value="0.5" min="0" max="1" step="0.05" />
    <span id="print-preamp-normal-gain-value">0.5</span>
  </dd>
  <dt><label for="range-preamp-high-treble-gain">High Treble Gain</label></dt>
  <dd>
    <input type="range" id="range-preamp-high-treble-gain" value="0.5" min="0" max="1" step="0.05" />
    <span id="print-preamp-high-treble-value">0.5</span>
  </dd>
  <dt><label for="range-preamp-drive">Drive</label></dt>
  <dd>
    <input type="range" id="range-preamp-drive" value="5" min="0" max="10" step="0.5" />
    <span id="print-preamp-drive-value">5.0</span>
  </dd>
  <dt><label for="range-preamp-post-equalizer-bass">Bass</label></dt>
  <dd>
    <input type="range" id="range-preamp-post-equalizer-bass" value="0" min="-24" max="24" step="1" />
    <span id="print-preamp-post-equalizer-bass-value">0 dB</span>
  </dd>
  <dt><label for="range-preamp-post-equalizer-middle">Middle</label></dt>
  <dd>
    <input type="range" id="range-preamp-post-equalizer-middle" value="0" min="-24" max="24" step="1" />
    <span id="print-preamp-post-equalizer-middle-value">0 dB</span>
  </dd>
  <dt><label for="range-preamp-post-equalizer-treble">Treble</label></dt>
  <dd>
    <input type="range" id="range-preamp-post-equalizer-treble" value="0" min="-24" max="24" step="1" />
    <span id="print-preamp-post-equalizer-treble-value">0 dB</span>
  </dd>
</dl>
<dl>
  <dt>
    <label for="checkbox-speaker-simulator"><span>Speaker Simulator</span></label>
  </dt>
  <dd><input type="checkbox" id="checkbox-speaker-simulator" checked /></dd>
</dl>
<dl>
  <dt><label for="range-distortion-mastervolume">Master Volume</label></dt>
  <dd>
    <input type="range" id="range-distortion-mastervolume" value="0.5" min="0" max="1" step="0.05" />
    <span id="print-distortion-mastervolume-value">0.5</span>
  </dd>
</dl>

function createPreampCurve(drive, numberOfSamples) {
  const curves = new Float32Array(numberOfSamples);

  const index = Math.trunc((numberOfSamples - 1) / 2);

  const d = (10 ** ((drive / 5.0) - 1.0)) - 0.1;
  const c = (d / 5.0) + 1.0;

  let peak = 0.4;

  if (c === 1) {
    peak = 1.0;
  } else if ((c > 1) && (c < 1.04)) {
    peak = (-15.5 * c) + 16.52;
  }

  for (let i = 0; i < index; i++) {
    curves[index + i] = peak * (((+1) - (c ** (-i))) + ((i * (c ** (-index))) / index));
    curves[index - i] = peak * (((-1) + (c ** (-i))) - ((i * (c ** (-index))) / index));
  }

  curves[index] = 0;

  return curves;
}

function createAsymmetricalOverdriveCurve(drive, numberOfSamples) {
  if (drive < 0 || drive >= 1) {
    return null;
  }

  const curves = new Float32Array(numberOfSamples);

  const k = (2 * drive) / (1 - drive);

  for (let n = 0; n < numberOfSamples; n++) {
    const x = (((n - 0) * (1 - (-1))) / (numberOfSamples - 0)) + (-1);
    const y = ((1 + k) * x) / (1 + (k * Math.abs(x)));

    // Asymmetrical clipping curve
    curves[n] = (y > 0) ? y : ((1 - ((drive > 0.5) ? 0.5 : drive)) * y);
  }

  return curves;
}

const context = new AudioContext();

const samples    = 127;
const oversample = '4x';

const shaper = new WaveShaperNode(context);

const preLowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: 3200, Q: -3 });

const preHighpass1 = new BiquadFilterNode(context, { type: 'highpass', frequency: 80, Q: -3 });
const preHighpass2 = new BiquadFilterNode(context, { type: 'highpass', frequency: 640, Q: -3 });
const preHighpass3 = new BiquadFilterNode(context, { type: 'highpass', frequency: 160, Q: -3 });

const highTrebleGain    = new GainNode(context, { gain: 0.5 });
const middleAndBassGain = new GainNode(context, { gain: 0.5 });

const preShaper  = new WaveShaperNode(context, { curve: createPreampCurve(5.0, samples), oversample });
const postShaper = new WaveShaperNode(context, { curve: createPreampCurve(5.0, samples), oversample });

const lowpass  = new BiquadFilterNode(context, { type: 'lowpass', frequency: 4000, Q: -3 });
const highpass = new BiquadFilterNode(context, { type: 'highpass', frequency: 40, Q: -3 });

const bass   = new BiquadFilterNode(context, { type: 'lowshelf', frequency: 240 });
const middle = new BiquadFilterNode(context, { type: 'peaking', frequency: 500, Q: 1.5 });
const treble = new BiquadFilterNode(context, { type: 'highshelf', frequency: 1600 });

const speakerSimulatorNotch   = new BiquadFilterNode(context, { type: 'notch', frequency: 8000, Q: 1 });
const speakerSimulatorLowpass = new BiquadFilterNode(context, { type: 'lowpass', frequency: 3200, Q: 6 });

const mastervolume = new GainNode(context, { gain: 0.5 });

const buttonElementPickingDown = document.getElementById('button-picking-down');
const buttonElementPickingUp   = document.getElementById('button-picking-up');
const buttonElementChord       = document.getElementById('button-chord');

const checkboxElementPreamp           = document.getElementById('checkbox-preamp');
const checkboxElementSpeakerSimulator = document.getElementById('checkbox-speaker-simulator');

const rangePreampNormalGainElement     = document.getElementById('range-preamp-normal-gain');
const rangePreampHighTrebleGainElement = document.getElementById('range-preamp-high-treble-gain');
const rangePreampDriveElement          = document.getElementById('range-preamp-drive');
const rangePreampBassElement           = document.getElementById('range-preamp-post-equalizer-bass');
const rangePreampMiddleElement         = document.getElementById('range-preamp-post-equalizer-middle');
const rangePreampTrebleElement         = document.getElementById('range-preamp-post-equalizer-treble');

const selectEffectorDistortionTypeElement = document.getElementById('select-distortion-type');
const rangeEffectorDistortionDriveElement = document.getElementById('range-distortion-drive');

const rangeDistortionMasterVolumeElement = document.getElementById('range-distortion-mastervolume');

const spanPrintPreampNormalGainElement     = document.getElementById('print-preamp-normal-gain-value');
const spanPrintPreampHighTrebleGainElement = document.getElementById('print-preamp-high-treble-value');
const spanPrintPreampDriveElement          = document.getElementById('print-preamp-drive-value');
const spanPrintPreampBassElement           = document.getElementById('print-preamp-post-equalizer-bass-value');
const spanPrintPreampMiddleElement         = document.getElementById('print-preamp-post-equalizer-middle-value');
const spanPrintPreampTrebleElement         = document.getElementById('print-preamp-post-equalizer-treble-value');

const spanPrintEffectorDistortionDriveElement = document.getElementById('print-distortion-drive-value');

const spanPrintDistortionMasterVolumeElement = document.getElementById('print-distortion-mastervolume-value');

Promise
  .all([
    fetch('./assets/one-shots/electric-guitar-clean-picking-down.mp3'),
    fetch('./assets/one-shots/electric-guitar-clean-picking-up.mp3'),
    fetch('./assets/one-shots/electric-guitar-clean-chord.mp3')
  ])
  .then(async (responses) => {
    const audioBuffers = await Promise.all(responses.map(async (response) => {
      const arrayBuffer = await response.arrayBuffer();
      const audioBuffer = await context.decodeAudioData(arrayBuffer);

      return audioBuffer;
    }));

    const onDown = async (event) => {
      const index = Number(event.target.getAttribute('data-index'));

      const buffer = audioBuffers[index];
      const source = new AudioBufferSourceNode(context, { buffer });

      shaper.disconnect(0);
      treble.disconnect(0);
      speakerSimulatorLowpass.disconnect(0);

      source.connect(shaper);

      if (checkboxElementPreamp.checked && checkboxElementSpeakerSimulator.checked) {
        shaper.connect(preHighpass1);
        preHighpass1.connect(preLowpass);
        preLowpass.connect(middleAndBassGain);
        middleAndBassGain.connect(preHighpass3);

        shaper.connect(preHighpass2);
        preHighpass2.connect(highTrebleGain);
        highTrebleGain.connect(preHighpass3);

        preHighpass3.connect(preShaper);

        preShaper.connect(lowpass);
        lowpass.connect(highpass);

        highpass.connect(postShaper);

        postShaper.connect(bass);
        bass.connect(middle);
        middle.connect(treble);
        treble.connect(speakerSimulatorNotch);

        speakerSimulatorNotch.connect(speakerSimulatorLowpass);
        speakerSimulatorLowpass.connect(mastervolume);
      } else {
        if (checkboxElementPreamp.checked) {
          shaper.connect(preHighpass1);
          preHighpass1.connect(preLowpass);
          preLowpass.connect(middleAndBassGain);
          middleAndBassGain.connect(preHighpass3);

          shaper.connect(preHighpass2);
          preHighpass2.connect(highTrebleGain);
          highTrebleGain.connect(preHighpass3);

          preHighpass3.connect(preShaper);

          preShaper.connect(lowpass);
          lowpass.connect(highpass);

          highpass.connect(postShaper);

          postShaper.connect(bass);
          bass.connect(middle);
          middle.connect(treble);
          treble.connect(mastervolume);
        } else if (checkboxElementSpeakerSimulator.checked) {
          shaper.connect(speakerSimulatorNotch);

          speakerSimulatorNotch.connect(speakerSimulatorLowpass);
          speakerSimulatorLowpass.connect(mastervolume);
        } else {
          shaper.connect(mastervolume);
        }
      }

      mastervolume.connect(context.destination);

      source.start(0);
    };

    buttonElementPickingDown.addEventListener('mousedown', onDown);
    buttonElementPickingDown.addEventListener('touchstart', onDown);
    buttonElementPickingUp.addEventListener('mousedown', onDown);
    buttonElementPickingUp.addEventListener('touchstart', onDown);
    buttonElementChord.addEventListener('mousedown', onDown);
    buttonElementChord.addEventListener('touchstart', onDown);

    checkboxElementPreamp.addEventListener('change', (event) => {
      if (event.currentTarget.checked) {
        rangePreampNormalGainElement.removeAttribute('disabled');
        rangePreampHighTrebleGainElement.removeAttribute('disabled');
        rangePreampDriveElement.removeAttribute('disabled');
        rangePreampBassElement.removeAttribute('disabled');
        rangePreampMiddleElement.removeAttribute('disabled');
        rangePreampTrebleElement.removeAttribute('disabled');
      } else {
        rangePreampNormalGainElement.setAttribute('disabled', 'disabled');
        rangePreampHighTrebleGainElement.setAttribute('disabled', 'disabled');
        rangePreampDriveElement.setAttribute('disabled', 'disabled');
        rangePreampBassElement.setAttribute('disabled', 'disabled');
        rangePreampMiddleElement.setAttribute('disabled', 'disabled');
        rangePreampTrebleElement.setAttribute('disabled', 'disabled');
      }
    });

    selectEffectorDistortionTypeElement.addEventListener('change', (event) => {
      const drive = rangeEffectorDistortionDriveElement.valueAsNumber;

      rangeEffectorDistortionDriveElement.removeAttribute('disabled');

      switch (event.currentTarget.value) {
        case 'overdrive': {
          shaper.curve      = createAsymmetricalOverdriveCurve(drive, samples);
          shaper.oversample = '2x';
          break;
        }

        case 'fuzz': {
          shaper.curve      = new Float32Array([drive, 0, drive]);
          shaper.oversample = '4x';
          break;
        }

        default: {
          shaper.curve      = null;
          shaper.oversample = 'none';

          rangeEffectorDistortionDriveElement.setAttribute('disabled', 'disabled');
          break;
        }
      }
    });

    rangeEffectorDistortionDriveElement.addEventListener('input', (event) => {
      const drive = event.currentTarget.valueAsNumber;

      switch (selectEffectorDistortionTypeElement.value) {
        case 'overdrive': {
          shaper.curve      = createAsymmetricalOverdriveCurve(drive, samples);
          shaper.oversample = '2x';
          break;
        }

        case 'fuzz': {
          shaper.curve      = new Float32Array([drive, 0, drive]);
          shaper.oversample = '4x';
          break;
        }

        default: {
          shaper.curve      = null;
          shaper.oversample = 'none';
          break;
        }
      }

      spanPrintEffectorDistortionDriveElement.textContent = drive.toFixed(1);
    });

    rangePreampNormalGainElement.addEventListener('input', (event) => {
      const gain = event.currentTarget.valueAsNumber;

      middleAndBassGain.gain.value = gain;

      spanPrintPreampNormalGainElement.textContent = gain.toString(10);
    });

    rangePreampHighTrebleGainElement.addEventListener('input', (event) => {
      const gain = event.currentTarget.valueAsNumber;

      highTrebleGain.gain.value = gain;

      spanPrintPreampHighTrebleGainElement.textContent = gain.toString(10);
    });

    rangePreampDriveElement.addEventListener('input', (event) => {
      const drive = event.currentTarget.valueAsNumber;

      preShaper.curve  = createPreampCurve(drive, samples);
      postShaper.curve = createPreampCurve(drive, samples);

      spanPrintPreampDriveElement.textContent = drive.toFixed(1);
    });

    rangePreampBassElement.addEventListener('input', (event) => {
      const gain = event.currentTarget.valueAsNumber;

      bass.gain.value = gain;

      spanPrintPreampBassElement.textContent = `${gain} dB`;
    });

    rangePreampMiddleElement.addEventListener('input', (event) => {
      const gain = event.currentTarget.valueAsNumber;

      middle.gain.value = gain;

      spanPrintPreampMiddleElement.textContent = `${gain} dB`;
    });

    rangePreampTrebleElement.addEventListener('input', (event) => {
      const gain = event.currentTarget.valueAsNumber;

      treble.gain.value = gain;

      spanPrintPreampTrebleElement.textContent = `${gain} dB`;
    });

    rangeDistortionMasterVolumeElement.addEventListener('input', (event) => {
      const gain = event.currentTarget.valueAsNumber;

      mastervolume.gain.value = gain;

      spanPrintDistortionMasterVolumeElement.textContent = gain.toString(10);
    });
  })
  .catch((error) => {
    // error handling
  });

音源はエレキギターのクリーンサウンドのワンショットオーディオを 3 つ用意しました (単音ピッキング 2 つ (音高ダウンとアップ) とコード弾き).

制御可能なパラメータが多いので, インタラクティブに制御できる部分は最小限にしました. クリッピングカーブの Float32Array のサイズ, および, 歪み系エフェクターのオーバードライブカーブは非対称クリッピング, 整流は全波整流に固定していますが, アプリケーションの要件次第では, これらもインタラクティブに制御可能にすることもあるでしょう. インタラクティブな部分が多く, コードが長くなっていますが, 分解すれば, これまで解説してきた, 歪み系エフェクターやアンプシミュレーターの実装です.

追加で解説すべきなのは, アンプシミュレーターと歪み系エフェクターの接続順です. 一般的には (マルチエフェクターなどエフェクターの接続順が固定されている場合でも), アンプシミュレーターの前に歪み系エフェクターを接続します (あとのセクションで解説しますが, エフェクターの接続順は出力されるサウンドに大きく影響します). UI も, 接続順がイメージしやすいように左から順に並べています.

サンプルコードにおける注意点ですが, 歪み系エフェクター, プリアンプ, スピーカーシミュレーターの有効・無効に応じて, 再生時のノード接続が変わるので, ワンショットオーディオを再生するイベントリスナーで, 歪み系エフェクターのためのノード (コードでの変数名は shaper), プリアンプの最後の接続ノード (コードでの変数名は treble), スピーカーシミュレーターの最後の接続ノード (コードでの変数名は speakerSimulatorLowpass) それぞれで disconnect メソッドを呼び出して, 前回再生時のノード接続をクリアしていることです (この処理がないと, 例えば, スピーカーシミュレーターつきで再生後, チェックボックスを外して, スピーカーシミュレーターなしで再生すると, スピーカシミュレーターつきのノード接続が残るので, スピーカーシミュレーターつきの音とスピーカーシミュレーターなしの音が合成されて再生されてしまいます). サンプルコードではありますが, disconnect メソッドの明示的な呼び出しが必要な, 比較的よくあるユースケースです.

DynamicsCompressorNode

Web Audio API でコンプレッサーを実装するのはおそらくもっとも簡単です. DynamicsCompressorNode インスタンスを生成して接続するだけです. これだけで, それなりのコンプレッサーとして機能します (DynamicsCompressorNode インスタンスの各 AudioParam のデフォルト値が機能するような値になっていますが, コンストラクタの第 2 引数の DynamicsCompressorOptions でインスタンス生成時に値を設定したり, AudioParam のセッターで値を設定したりはできます).

const context = new AudioContext();

const oscillator = new OscillatorNode(context);

const compressor = new DynamicsCompressorNode(context);

// If use `createDynamicsCompressor`
// const compressor = context.createDynamicsCompressor();

// OscillatorNode (Input) -> DynamicsCompressorNode (Compressor) -> AudioDestinationNode (Output)
oscillator.connect(compressor);
compressor.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 10 sec
oscillator.stop(context.currentTime + 10);

以下は, 基本波形の合成セクションでコード例として記載した, 和音となる OscillatorNode の合成で, ゲインの調整ではなく, コンプレッサーを利用することで (DynamicsCompressorNode インスタンスを接続することで), 意図しない音割れを防止するコードです.

const context = new AudioContext();

// C major chord
const oscillatorC = new OscillatorNode(context, { frequency: 261.6255653005991 });
const oscillatorE = new OscillatorNode(context, { frequency: 329.6275569128705 });
const oscillatorG = new OscillatorNode(context, { frequency: 391.9954359817500 });

const compressor = new DynamicsCompressorNode(context);

// If use `createDynamicsCompressor`
// const compressor = context.createDynamicsCompressor();

// OscillatorNode (Input) -> DynamicsCompressorNode (Compressor) -> AudioDestinationNode (Output)
oscillatorC.connect(compressor);
oscillatorE.connect(compressor);
oscillatorG.connect(compressor);
compressor.connect(context.destination);

// Start oscillators immediately
oscillatorC.start(0);
oscillatorE.start(0);
oscillatorG.start(0);

// Stop oscillators after 10 sec
oscillatorC.stop(context.currentTime + 10);
oscillatorE.stop(context.currentTime + 10);
oscillatorG.stop(context.currentTime + 10);

「おそらくもっとも簡単」と表現したのは, AudioNode 単体の接続とデフォルト値でエフェクターとして機能することが理由です. すでに, 解説したように DelayNode や BiquadFilterNode 単体としては現実世界の (音楽表現として意味をもつ) エフェクターとして機能することはないからです.

コンプレッサーの仕組み

DynamicsCompressorNode で制御可能なパラメータ (AudioParam インスタンス) としては, threshold, knee, ratio, attack, release がありますが, コンプレッサーの効果に大きく影響するのは, threshold (閾値) と ratio (レシオ値) です.

threshold は, コンプレッサーによる振幅の圧縮がかかる閾値を指定します. 逆に言うと, threshold 以下の振幅には影響を与えません. 単位はデシベルで, -100 dB から 0 dB デシベルまでの範囲で設定可能です. threshold が 0 (dB) の場合は, コンプレッサーが効いていないのと同じで, -100 (dB) に近づくほど, より小さな振幅に対してもコンプレッサーが効くことになります (デフォルト値は, -24 (dB) です).

ratio は, threshold を超えた振幅を圧縮する割合を指定します (デフォルト値は 12 なので, threshold を超えた振幅値を $\frac{1}{12}$ 倍に圧縮します). したがって, ratio が 1 (最小値) の場合は, まったく圧縮をしないので, コンプレッサーが効いてないのと同じで, ここから $\infty$ (ただし, 実際の最大値は 20 です) に近づくほど, threshold に近い値に圧縮されていきます. 圧縮後の振幅値は, threshold の振幅値と圧縮された振幅値を加算した値となります. リミッターは, ratio が $\infty$ のコンプレッサーであり, threshold を超える振幅はすべて threshold にまで圧縮します.

knee は threshold を超えた振幅の圧縮を緩やかに処理する (Soft knee) か, 急峻に処理する (Hard knee) かを決定します. デフォルト値は 30 (dB) ですが, 最大値の 40 (dB) に近づくほど, より緩やかな振幅の圧縮となり, 最小値の 0 (dB) に近づくほど, 急峻な圧縮となります (音楽的には, コンプレッサーが急激に効いてしまうと, アナログ感のあるスムーズな圧縮にならず, いわゆる, 「デジタルくさい音」と言われることもあるので, それを緩和するパラメータと考えるとよいかもしれません (また, knee の値とコンプレッションカーブの関係 (関数) は, 単調増加する関数であることが唯一の仕様となっているので, その詳細はレンダリングエンジンの実装に依存することになります).

また, 振幅を圧縮した結果, 振幅を大きくする余地が発生します. これによって, 相対的に振幅の小さい音もある程度大きくすることが可能になります (ただし, DynamicsCompressorNode の仕様上, どのようなアルゴリズムよって増幅するかは記載されていないので, レンダリングエンジンの実装に依存することになります).

attack と release はイメージとしては, エンベロープジェネレーターの attack と release と同じで, コンプレッサーが効き始めと終わりの時間的変化を指定することになります. 仕様としては, attack は, コンプレッサーが効き始めて, 10 dB 圧縮されるまでの時間 (秒単位. デフォルト値は, 0.003 sec), release は, コンプレッサーが効き終わってから, 10 dB 増幅されるまでの時間 (秒単位. デフォルト値は, 0.25 sec) となっています. また, attack と release による, コンプレッサーの時間的な圧縮レベルの変化は, 読み取り専用の reduction プロパティ (単位は dB)で参照することが可能です.

音像

人間の聴覚は, 音を聴いただけで, 音源の位置や音源の (物理的な) 大きさや形などを知覚することができます. この感覚的に (実際の音源はどうであれ) 知覚した音を, 音像と呼びます. すなわち, 聴覚上の音源とも言えます. Web Audio API の音像に関しては, StereoPannerNode クラスもそうですが, あとのセクションで解説する PannerNode クラスも音像を変化させることが可能ですが, 音源の位置のみの設定です (AudioListener クラスで, リスナーの位置も設定可能で, これによって音像を変化させることもできます). したがって, Web Audio API のスコープの中では, 音像, イコール, 音源の位置と理解しても問題ありません. また, 音像を知覚することを, 音像定位と呼びます.

音像を適切に設定したり, 変化させることで, 音に立体感や臨場感を与えることができます. 特に, CG (WebGL) と音楽を利用するような Web アプリケーションでは (理論上は) 重要なエフェクターと言えます (しかしながら, 現状の Web Audio API における PannerNode クラス, および, AudioListener クラスは, それらのユースケースに十分に応えられるほど精度のよいものではありません).

StereoPannerNode

StereoPannerNode クラスは, 音像を左右に移動させることだけに特化した AudioNode です (PannerNode クラスの positionX プロパティ (AudioParam) のみを設定可能なクラスで, PannerNode クラスのサブセット的なクラスと言えます). 音楽制作・音源編集などのユースケースでは, 左右のチャンネルに音像を振ることができれば十分要件を満たすことができるので, すなわち, オートパンにおいても StereoPannerNode で実装可能です (PannerNode クラスは左右のチャンネルに音像を設定するというよりは, あくまで立体音響でのユースケースのために定義されています).

StereoPannerNode には, AudioParam の pan プロパティのみが定義されています. デフォルト値は 0 で, 音像は変化しません. pan プロパティの値は, 最大値 (maxValue) が 1, 最小値 (minValue) が -1 ですが, 最大値に近いほど, 右チャンネルに音像が振られ, 最小値に近いほど, 左チャンネルに音像が振られます.

以下のコードは, pan プロパティの初期値を -1 (つまり, 左チャンネルに完全に音像を振った状態) に設定して (コンストラクタの第 2 引数 StereoPannerOptions で指定しています. ファクトリメソッドを利用する場合は, AudioParam の value プロパティで設定してください). タイマーによって, 右チャンネル, 左チャンネルに交互に音像を移動させます (ヘッドフォンやイヤフォンを着用して確認することを推奨します).

const context = new AudioContext();

const oscillator = new OscillatorNode(context);

const panner = new StereoPannerNode(context, { pan: -1 });

// If use `createStereoPanner`
// const panner = context.createStereoPanner();
//
// panner.pan.value = -1;

// OscillatorNode (Input) -> StereoPannerNode (pan) -> AudioDestinationNode (Output)
oscillator.connect(panner);
panner.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 10 sec
oscillator.stop(context.currentTime + 10);

const intervalid = window.setInterval(() => {
  panner.pan.value *= -1;
}, 2000);

oscillator.onended = () => {
  window.clearInterval(intervalid);
};

オートパンを実装するには, AudioParam である pan に, LFO を接続して周期的に変化させることで可能になります.

以下は, 実際のアプリケーションを想定して, ユーザーインタラクティブに, オートパンに関わるパラメータを制御できるようにしたコード例です. Depth が大きいほど, より大きく左右に音像が振れて, Rate を高くするほど, より速く左右に音像が振られるようになります.

<button type="button">start</button>
<label>
  <input type="checkbox" id="checkbox-auto-panner" checked />
  <span id="print-checked-auto-panner">ON</span>
</label>
<label for="range-auto-panner-depth">Depth</label>
<input type="range" id="range-auto-panner-depth" value="0" min="0" max="1" step="0.05" />
<span id="print-auto-panner-depth-value">0</span>
<label for="range-auto-panner-rate">Rate</label>
<input type="range" id="range-auto-panner-rate" value="0" min="0" max="5" step="0.05" />
<span id="print-auto-panner-rate-value">0</span>

const context = new AudioContext();

let rateValue = 0;

let oscillator = new OscillatorNode(context);
let lfo        = new OscillatorNode(context, { frequency: rateValue });

let isStop = true;

const depth = new GainNode(context);

const panner = new StereoPannerNode(context);

const buttonElement   = document.querySelector('button[type="button"]');
const checkboxElement = document.querySelector('input[type="checkbox"]');

const rangeDepthElement = document.getElementById('range-auto-panner-depth');
const rangeRateElement  = document.getElementById('range-auto-panner-rate');

const spanPrintCheckedElement = document.getElementById('print-checked-auto-panner');
const spanPrintDepthElement   = document.getElementById('print-auto-panner-depth-value');
const spanPrintRateElement    = document.getElementById('print-auto-panner-rate-value');

checkboxElement.addEventListener('click', () => {
  oscillator.disconnect(0);
  lfo.disconnect(0);

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> StereoPannerNode (Auto Panner) -> AudioDestinationNode (Output)
    oscillator.connect(panner);
    panner.connect(context.destination);

    // Connect nodes for LFO that changes pan periodically
    // OscillatorNode (LFO) -> GainNode (Depth) -> pan (AudioParam)
    lfo.connect(depth);
    depth.connect(panner.pan);

    spanPrintCheckedElement.textContent = 'ON';
  } else {
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    spanPrintCheckedElement.textContent = 'OFF';
  }
});

buttonElement.addEventListener('mousedown', () => {
  if (!isStop) {
    return;
  }

  if (checkboxElement.checked) {
    // Connect nodes
    // OscillatorNode (Input) -> StereoPannerNode (Auto Panner) -> AudioDestinationNode (Output)
    oscillator.connect(panner);
    panner.connect(context.destination);

    // Start oscillator
    oscillator.start(0);
  } else {
    panner.disconnect(0);

    // Connect nodes (Auto Panner OFF)
    // OscillatorNode (Input) -> AudioDestinationNode (Output)
    oscillator.connect(context.destination);

    // Start oscillator
    oscillator.start(0);
  }

  // Connect nodes for LFO that changes pan periodically
  // OscillatorNode (LFO) -> GainNode (Depth) -> pan (AudioParam)
  lfo.connect(depth);
  depth.connect(panner.pan);

  lfo.start(0);

  isStop = false;

  buttonElement.textContent = 'stop';
});

buttonElement.addEventListener('mouseup', () => {
  if (isStop) {
    return;
  }

  // Stop immediately
  oscillator.stop(0);
  lfo.stop(0);

  oscillator = new OscillatorNode(context);
  lfo        = new OscillatorNode(context, { frequency: rateValue });

  isStop = true;

  buttonElement.textContent = 'start';
});

rangeDepthElement.addEventListener('input', (event) => {
  const depthValue = event.currentTarget.valueAsNumber;

  depth.gain.value = depthValue;

  spanPrintDepthElement.textContent = depthValue.toString(10);
});

rangeRateElement.addEventListener('input', (event) => {
  rateValue = event.currentTarget.valueAsNumber;

  if (lfo) {
    lfo.frequency.value = rateValue;
  }

  spanPrintRateElement.textContent = rateValue.toString(10);
});

トレモロによる実装

人間の聴覚は, (実際に音源があるかは無関係に) 音が大く聴こえてくる方向に音源があると判断する仕組みがあります. これを, インテンシティ効果と呼びます. つまり, 実際に音源がなくても, 左側から聴こえてくる音が右側から聴こえてくる音より, より大きいほど, 音源が左側にあると知覚します. パンの変更やオートパンはこのインテンシティ効果を利用したエフェクターと言えます.

トレモロによるオートパンの実装は, インテンシティ効果を直接コードに落とし込んだ実装と言えます. 左右の位相が互いに逆位相になることにより, 徐々に音像が左右の間で移動することになります. 左右の位相が互いに逆位相になることにより, 徐々に音像が左右の間で移動することになります. 位相差が大きいほど, 左右のどちらかに, 小さいほど中央に音像が移動します.

ChannelSplitterNode

ChannelSplitterNode は, 指定のチャンネル数に分割するためのクラスです. デフォルト値としては, 6 チャンネルに分割します (おそらく, このデフォルト値は, 5.1 チャンネルサラウンド方式を考慮しての値と思われます). つまり, ステレオ (2 チャンネル) に分割するのであれば, コンストラクタの第 2 引数 ChannelSplitterOptions 型の numberOfOutputs プロパティに 2 を指定します (ファクトリメソッドを利用する場合は, 第 1 引数に指定します).

const context = new AudioContext();

const splitter = new ChannelSplitterNode(context, { numberOfOutputs: 2 });

// If use `createChannelSplitter`
// const splitter = context.createChannelSplitter(2);

ChannelMergerNode

ChannelMergerNode は, ChannelSplitterNode によって分割された複数のチャンネルを 1 つのチャンネル (ストリーム) にまとめるためのクラスです (したがって, ChannelSplitterNode と併用するケースがほとんどです). ChannelSplitterNode のデフォルト値にしたがって, デフォルトの入力チャンネル数は 6 チャンネルです. つまり, ステレオ (2 チャンネル) を 1 つのチャンネルにまとめるのであれば, コントラクタの第 2 引数 ChannelMergerOptions 型の numberOfInputs プロパティに 2 を指定します (ファクトリメソッドを利用する場合は, 第 1 引数に指定します).

const context = new AudioContext();

const merger = new ChannelMergerNode(context, { numberOfInputs: 2 });

// If use `createChannelMerge`
// const merger = context.createChannelMerger(2);

<audio src="https://korilakkuma.github.io/Web-Music-Documentation/assets/medias/Schubert-Symphony-No8-Unfinished-1st-2020-VR.mp3" crossorigin="anonymous" controls />

const context = new AudioContext();

const audioElement = document.querySelector('audio');

const source = new MediaElementAudioSourceNode(context, { mediaElement: audioElement });

const amplitudeL = new GainNode(context, { gain: +1.0 });  // +1.0 +- ${depthValue}
const amplitudeR = new GainNode(context, { gain: -1.0 });  // -1.0 +- ${depthValue} Inverse Phase

const lfo   = new OscillatorNode(context, { frequency: 0 });
const depth = new GainNode(context, { gain: 0 });

const splitter = new ChannelSplitterNode(context, { numberOfOutputs: 2 });
const merger   = new ChannelMergerNode(context, { numberOfInputs: 2 });

const lfoSplitter = new ChannelSplitterNode(context, { numberOfOutputs: 2 });

// Connect nodes
//                                                              -> GainNode (Amplitude) Output Channel Number is `0` (Left Channel)  -> Input Channel Number is `0` (Left Channel)  -
// MediaElementAudioSourceNode (Input) -> ChannelSplitterNode -|                                                                                                                    | -> ChannelMergerNode -> AudioDestinationNode (Output)
//                                                              -> GainNode (Amplitude) Output Channel Number is `1` (Right Channel) -> Input Channel Number is `1` (Right Channel) -
source.connect(splitter);
splitter.connect(amplitudeL, 0, 0);
splitter.connect(amplitudeR, 1, 0);
amplitudeL.connect(merger, 0, 0);
amplitudeR.connect(merger, 0, 1);
merger.connect(context.destination);

// Connect nodes for LFO that changes gain periodically
// OscillatorNode (LFO) -> GainNode (Depth) -> ChannelSplitterNode
lfo.connect(depth);
depth.connect(lfoSplitter);

// ChannelSplitterNode (Left Channel) ->  gain (AudioParam) (Left Channel)
lfoSplitter.connect(amplitudeL.gain, 0);

// ChannelSplitterNode (Right Channel) ->  gain (AudioParam) (Right Channel)
lfoSplitter.connect(amplitudeR.gain, 1);

lfo.start(0);

const rangeDepthElement = document.getElementById('range-auto-panner-by-tremolo-depth');
const rangeRateElement  = document.getElementById('range-auto-panner-by-tremolo-rate');

const spanPrintDepthElement = document.getElementById('print-auto-panner-by-tremolo-depth-value');
const spanPrintRateElement  = document.getElementById('print-auto-panner-by-tremolo-rate-value');

rangeDepthElement.addEventListener('input', (event) => {
  const depthValue = event.currentTarget.valueAsNumber;

  depth.gain.value = depthValue;

  spanPrintDepthElement.textContent = depthValue.toString(10);
});

rangeRateElement.addEventListener('input', (event) => {
  const rateValue = event.currentTarget.valueAsNumber;

  lfo.frequency.value = rateValue;

  spanPrintRateElement.textContent = rateValue.toString(10);
});

グライドのパラメータのオートメーション

グライドに必要となるパラメータのオートメーションは, OscillatorNode インスタンスの frequency プロパティ (または detune プロパティ) で, グライドタイムの経過後に, 次の frequency プロパティの値になるように変化させます. 以下の実装では, linearRampToValueAtTime メソッドを利用して線形的に変化させていますが, exponentialRampToValueAtTime メソッドを利用して指数関数的に変化させてもよいでしょう. グライドのアルゴリズム上, 次に発音する音の周波数が同じ場合, 効果はありません.

OscillatorNode インスタンスの frequency プロパティのオートメーションと同様に, AudioBufferSourceNode インスタンスの detune プロパティ (または playbackRate プロパティ) を変化させれば, スラーやスライド奏法の実現となります.

const context = new AudioContext();

const defaultFrequency = 440;
const nextFrequency    = 880;

const glide = 1.5;

const oscillator = new OscillatorNode(context);

// OscillatorNode (Input) -> AudioDestinationNode (Output)
oscillator.connect(context.destination);

const t0 = context.currentTime;
const t1 = t0 + glide;

// Schedule `frequency` (`AudioParam`) for Glide
oscillator.frequency.setValueAtTime(defaultFrequency, t0);
oscillator.frequency.linearRampToValueAtTime(nextFrequency, t1);

// Start oscillator immediately
oscillator.start(t0);

// Stop oscillator after 2.5 sec
oscillator.stop(t1 + 2.5);

以下は, シンセサイザーで利用することを想定して, 鍵盤の UI でインタラクティブに操作できるようにしたコード例です (グライドタイムとメソッド (linearRampToValueAtTime メソッド, または, exponentialRampToValueAtTime メソッド) もインタラクティブに制御できるようにしています.

また, 鍵盤の UI の実装はいくつかアプローチ (SVG, Canvas ... etc) がありますが, ここではシンプルに HTML と CSS で実装しています).

HTML や CSS のコードまで記載すると, グライドの本質的な解説からそれてしまうので, ディベロッパーツールなどを使いながら, HTML や CSS をリーディングしていただくとして, その UI がある前提で, グライドのコードを記載します.

const context = new AudioContext();

const keyboards = document.querySelectorAll('.piano button[type="button"]');

const frequencyRatio = 2 ** (1 / 12);

let glideTime = 0;
let glideType = 'linear';

// Invalid frequency
let prevFrequency = -1;

keyboards.forEach((keyboard) => {
  let oscillator = null;

  const onDown = async (event) => {
    if (context.state !== 'running') {
      await context.resume();
    }

    const t0 = context.currentTime;

    if (oscillator !== null) {
      // If starts next oscillator during glide, should cancel scheduling
      oscillator.frequency.cancelScheduledValues(t0);
      oscillator.stop(t0);
    }

    const pianoIndex    = Number(keyboard.getAttribute('data-index'));
    const nextFrequency = 27.5 * (frequencyRatio ** pianoIndex);

    oscillator = new OscillatorNode(context, { type: 'sawtooth', frequency: (prevFrequency === -1 ? nextFrequency : prevFrequency) });

    oscillator.connect(context.destination);

    if (prevFrequency !== -1) {
      const t1 = t0 + glideTime;

      oscillator.frequency.setValueAtTime(prevFrequency, t0);

      switch (glideType) {
        case 'linear': {
          oscillator.frequency.linearRampToValueAtTime(nextFrequency, t1);
          break;
        }

        case 'exponential': {
          oscillator.frequency.exponentialRampToValueAtTime(nextFrequency, t1);
          break;
        }
      }
    }

    // Update frequency
    prevFrequency = nextFrequency;

    oscillator.start(t0);

    keyboard.classList.add('pressed');
  };

  const onUp = () => {
    if (oscillator === null) {
      return;
    }

    oscillator.frequency.cancelScheduledValues(context.currentTime);
    oscillator.stop(0);

    oscillator = null;

    keyboard.classList.remove('pressed');
  };

  keyboard.addEventListener('mousedown', onDown);
  keyboard.addEventListener('touchstart', onDown);
  keyboard.addEventListener('mouseup', onUp);
  keyboard.addEventListener('touchend', onUp);
});

const rangeGlideTimeElement = document.getElementById('range-glide-time');
const formGlideTypeElement  = document.getElementById('form-glide-type');

const spanPrintGlideTimeElement = document.getElementById('print-glide-time-value');

rangeGlideTimeElement.addEventListener('input', (event) => {
  glideTime = event.currentTarget.valueAsNumber;

  spanPrintGlideTimeElement.textContent = glideTime.toFixed(2);
});

formGlideTypeElement.addEventListener('change', () => {
  const radios = formGlideTypeElement.elements['radio-glide-type'];

  for (const radio of radios) {
    if (radio.checked) {
      glideType = radio.value;
      break;
    }
  }
});

UI と関連するイベントリスナーのコードも混在していますが, 以下の 3 つが実用的なグライドを実装する場合に重要となります (コードのコメントとしても記載しています).

• グライドの原理上, 初回の発音では無効なので, 初回の発音が判定できるフラグなどを定義します. 上記のコードでは, prevFrequency 変数を周波数としては無効な -1 に設定することで初回の発音であることを判定して分岐させています (また, このほうが, 初回の発音時は, 前回の発音はないので, より原理を実装に落とし込んだコードと言えそうです. もちろん, boolean 型の変数などで判定しても実装としては問題ありません)
• 発音のたびに, 現在発音している周波数 (コードでは nextFrequency 変数) を次回の発音まで参照できるようにします. 実装としては, prevFrequency 変数を更新してしまうのがよいでしょう (1 つ前より以前の周波数を参照する必要はないので)
• 上記の 2 つが実装できていれば, グライドとしてはほぼ問題なく機能しますが, 鍵盤を連打した場合など, 前回の frequency プロパティのスケジューリングが残っている可能性があるので, 発音のたびに, OscillatorNode インスタンスが存在していれば, cancelScheduledValues メソッドでクリアして, 即時停止します (ちなみに, Firefox の対応が不要であれば, cancelAndHoldAtTime メソッドを利用してもよいでしょう. その場合, setValueAtTime メソッドが不要になります)

また, グライドの実装とは関係ありませんが, このような鍵盤の UI を利用して発音する場合, 周波数の算出式として, $27.5 \cdot \mathrm{pow}\left(\mathrm{pow}\left(2, \left(\frac{1}{12}\right)\right), \mathrm{index}\right)$ を利用すると便利です. $\mathrm{index}$ は, ピアノ 88 鍵を配列に見立てて, 最も左側にある鍵盤 (27.5 Hz) のインデックスを 0 とした場合の値です. また, そのインデックスは, それぞれの鍵盤を構成する HTML のカスタムーデータ属性として定義しておくことで, イベントリスナーで簡単に取得することが可能です (もちろん, 他のよりよい実装があるかもしれませんが).

時間分解能と周波数分解能

ところで, 直接サウンドデータにアクセスしなければ実装できないオーディオ信号処理でも, 時間領域の演算のみで実装できる場合は, AudioWorkletProcessCallback メソッドで, renderQuantumSize (デフォルトは 128 サンプル) ごとに処理を適用すれば問題ありません. 例えば, 時間領域でのボーカルキャンセラやノイズゲート, また, エフェクターではありませんが, ノイズ生成もこれに該当します.

問題となるのは, 周波数領域での演算を必要とする, つまり, 高速フーリエ変換を必要とする場合は, 周波数分解能の低さが問題となります. 結論から解説すると, デフォルトの renderQuantumSize, つまり, 128 サンプルごとの処理では, 周波数分解が非常に低く, 周波数領域での演算精度が悪くなり, 結果として, エフェクターが想定より効いていなかったり, 場合によってはノイズとなってしまっりといった諸問題が発生します. さらに, 直接サウンドデータにアクセスしなければ実装できないオーディオ信号処理のほとんどは, 周波数領域での演算を必要とします. 例えば, ピッチシフターやノイズサプレッサー, 周波数領域でのボーカルキャンセラなどです (Web Audio API 1.1 では, 必ずしも 128 サンプル固定ではないものの, 適用される renderQuantumSize はブラウザやプラットフォーム依存なので, 周波数分解能の低さを根本的に解決はできません).

AudioWorklet における (Web Audio API における) 周波数分解能の低さを解決する手法として, オーバーラップアド (Overlap-Add method: 重畳加算法) があります. イメージとしては, 過去の数フレーム (renderQuantumSize のオーディオデータ) をバッファに格納しておき, 過去のデータとつなぎ合わせて, (入出力以外の) オーディオの処理単位を (一般的には 2 の冪乗で) 任意のサイズで制御することができる手法です. これによって, 高速フーリエ変換のサイズも renderQuantumSize に依存しない, つまり, 128 サンプルよりも大きなサンプル数を指定できるので周波数分解能の問題を解決することができます.

では, 周波数分解能の説明をします. 周波数分解能 ($f_{\mathrm{resolution}}$) は以下の数式で定義されます. 分子の $f_{s}$ はサンプリング周波数, 分母の $N$ は, 高速フーリエ変換のサイズです.

サンプリング周波数を一定, つまり, 定数とすると, 周波数分解能は, 高速フーリエ変換のサイズによって決まることになります. そして, 高速フーリエ変換のサイズである $N$ の値を大きくしていくと, 周波数分解能 ($f_{\mathrm{resolution}}$) はより小さい値になっていきます. 周波数分解能の値が小さいほど, より精度の高い周波数演算ができるので周波数分解能が高くなります.

具体的な値で算出すると, サンプリング周波数 $f_{s}$ を 48000 で定数とします. 高速フーリエ変換のサイズを, デフォルトの renderQuantumSize の 128 サンプルとすると, $f_{\mathrm{resolution}} = \frac{48000}{128} = 375$ となり, 周波数領域での演算を 375 Hz 単位の粗い単位でしか実行できなくなり, 先に解説した諸問題が発生します. 一方で, 高速フーリエ変換のサイズをオーバーラップアドによって, 2048 サンプル (過去 15 フレーム (renderQuantumSize) 分と現在の 1 フレーム (renderQuantumSize) 分のサンプル (ただし, 厳密には, オーバーラップ, つまり, 重なるサンプルがあるので, 過去の必要なフレームは 15 フレームより多いです. あくまで, 理解のための概算と考えてください. 2048 サンプルは, 時間分解能とのバランスを考慮したよく利用されるサンプル数です) とすると, $f_{\mathrm{resolution}} = \frac{48000}{2048} = 23.4375$ となり, 周波数領域での演算を約 24 Hz 単位の細かい精度で実行できるので, 先に解説した諸問題は実用上発生しません (理論上は, デジタル信号である以上, 少なからず丸め誤差によるノイズなどはありますが).

ピアノ 88 鍵の音域で考えると, 高速フーリエ変換のサイズがデフォルトの renderQuantumSize の 128 サンプルでは, 低音域の 44 鍵がまったく演算できないことになりますが, 2048 サンプルにすると, 最も低い 27.5 Hz から 88 鍵の音域をすべて演算可能できることになります. また, すでに解説したグラフィックイコライザーで考えると, 低音の帯域が 32 Hz から 250 Hz となるので, 高速フーリエ変換のサイズがデフォルトの renderQuantumSize の 128 サンプルでは, 低音域をまったく演算できないことになりますが, 2048 サンプルにすると, 十分に低音域も演算できることになります.

ところで, 周波数分解能の低さが問題になるのであれば, なぜ, デフォルトの renderQuantumSize をもっと大きな値に仕様策定していないのでしょうか ? 実は, 周波数分解を高くすると時間分解能が低くなるというトレードオフの関係があるからです. 時間分解能は, 1 フレームあたりのサンプル数です. Web Audio API では, (デフォルトの実装で) renderQuantumSize が時間分解能です. また, 上記の周波数分解能の数式では, 高速フーリエ変換サイズである $N$ が時間分解能です. すなわち, 単位時間あたりに処理するサンプル数が小さいほど時間分解能は高くなります (高速フーリエ変換のサイズ (時間分解能である) $N$ を小さくするほど, 周波数分解能である $f_{\mathrm{resolution}}$ はより大きな値となります). 時間分解能が高いほど (単位時間あたりに処理するサンプル数が小さいほど), CPU の負荷を減らせるので, グリッチ (glitch) や遅延 (latency) を軽減することができます. すなわち, Web Audio API の設計では, 時間分解能を優先しているということです (これは, 非推奨となった仕様である ScriptProcessorNode のフィードバックから影響を受けています. また, このことからも, Web Audio API では, AudioWorklet による実装を最終手段的に利用するべきという暗黙的な設計思想がうかがえます).

先ほどの周波数分解能の算出の例として, 時間分解能とのバランスを考慮したのも, トレードオフの関係があるからです. 実用的によく利用される高速フーリエ変換のサイズは 512, 1024, 2048, 4096 あたりです. これより小さい, もしくは大きいと, 周波数分解能が低すぎる, または, 時間分解能が低すぎてそれぞれのケースにおける諸問題を発生させてしまいます. 参考までに, AnalyserNode の fftSize プロパティのデフォルト値も 2048 となっています.

視覚的にも, 時間分解能と周波数分解能を理解してみましょう. 以下の波形 (OscillatorNode) は, いずれも, ノコギリ波 (偶奇の倍音成分をもつので視覚的に理解しやすくなります) で, ピアノ 88 鍵盤の最も低い周波数である 27.5 Hz です.

デフォルトの renderQuantumSize である 128 サンプルの場合, 時間分解能が高く 1 フレームあたり, 約 2.5 msec の高い精度で処理されています (Gibbs の現象の詳細を確認できるほどの時間分解能です). 一方で, 周波数分解能が 375 Hz で, 27.5 Hz には程遠い帯域なので, まったく処理できていません (128 サンプルのスペクトルの描画はバグではなく, 周波数分解能が低すぎて描画されていません).

2048 サンプルの場合, 周波数分解能が高く, 27.5 Hz の帯域と倍音成分が高い精度で処理されています. 一方で, 時間分解能が低くなるので, 1 フレームあたり, 約 40 msec と低い精度になっています (それにしたがって, レイテンシーも大きくなります).

オーバーラップアド

オーバーラップアド (Overlap-Add method: 重畳加算法) とは, その命名のとおり, フレームごとに区切ったオーディオデータのサンプルを 「重ねて」「加算」することです. 特に, リアルタイム処理においては, 過去のフレームをバッファに格納しておき, それぞれのフレームに対して, 1 つあとのフレームをスライディングして重ねて, 加算します.

ところで, 周波数分解能の問題だけであれば, わざわざ「重ねて」「加算」する必要はない, すなわち, オーバーラップアドをわざわざ実装する必要はないように思われます. しかしながら, 周波数領域で演算する場合, 離散フーリエ変換後の信号は周期が $N$ (離散フーリエ変換のサイズ. 実用上は, 高速フーリエ変換のサイズ) であることを仮定しています ($-\frac{f_{s}}{2}$ (負のナイキスト周波数) から $\frac{f_{s}}{2}$ (ナイキスト周波数) までが 1 周期で, その間のサンプル数は $N$ ($0 \lt k \leq \frac{f_{s}}{2}$ の範囲で $\frac{N}{2}$) となります). したがって, $N$ が対象の信号の周期の整数倍となっていない場合, 時間領域の波形に不連続点が発生してしまい, その波形を離散フーリエ変換することで, 本来は存在しない周波数成分が発生してしまいます. そして, 現実のオーディオデータにおいて, 離散フーリエ変換のサイズが, 周期の整数倍になることは稀です.

この問題を緩和するために, (次のセクションで解説する) 窓関数を利用しますが, 窓関数は, ほとんどが両端で 0 となるので (あるいは, ハミング窓でもかなり減衰するので), フレーム両端のオーディオデータが失われてしまいます. そこで, オーバーラップアドによって, フレーム両端のオーディオデータを平滑化して保ちながら, 本来は存在しない周波数成分が発生してしまう問題も緩和することができます. 特に, 巡回畳み込みで不可欠な処理となります.

また, オーバーラップアドの計算量を改良した, オーバーラップセーブ (Overlap-Save method: 重畳保留法) が利用されることもありますが, その処理の目的は同じです.

窓関数

理論上, フレームのサイズを十分に大きくしていけば, 離散フーリエ変換のサイズが周期の整数倍になります. しかしながら, フレームサイズを大きくしすぎると, 時間分解能が低下します. さらに, 高速フーリエ変換を適用するとなると 2 の冪乗単位でフレームを大きくする必要があり, 離散フーリエ変換のサイズが周期の整数倍 (かつ, 2 の冪乗) になるようにフレームサイズを大きくするというのは, 現実的には難しい解決手段です.

そこで, 周波数分解能の低下をある程度を許容して, 本来存在しない周波数成分 (不連続点が原因なので, 段差成分と呼ばれることもあります) を除去する (緩和する) ために, 窓関数を時間領域で乗算 (周波数領域ではコンボリューション積分) します. 窓関数によって, フレーム両端の不連続点を除去 (緩和) して, 離散フーリエ変換のサイズが周期の整数倍になるように処理を適用します.

窓関数の振幅スペクトルの形状は, メインローブとサイドローブに分類できます. メインローブの幅が狭いほど周波数分解能が高くなり, サイドローブのピーク値が低いほど段差成分の周波数成分が発生するのを防ぐことができます. 例えば, 矩形窓の場合, その振幅スペクトルの形状はシンク関数 ($\left|H_{rect}\left({\omega}\right)\right| = \left|\frac{\sin\left(\omega\right)}{\omega}\right|$) になります.

矩形窓の振幅スペクトル (青色のパス) はメインローブの幅 (半透明の青) は狭くて, 周波数分解能は高くなりますが, サイドローブのピーク値 (青色の破線のパス) が高くなってしまうので, 段差成分の周波数成分を除去することができません. そのために, ハニング窓やハミング窓など (狭義での) 窓関数を利用します (ハニング窓の振幅スペクトルはマゼンタのパス, メインローブの幅を半透明のマゼンタ, サイドローブのピーク値をマゼンタの破線のパスで描画しています).

上記の表で記載した以外にも, 窓関数がいくつも定義されているのは, メインローブの幅 (周波数分解能) とサイドローブのピーク値 (段差成分の有無) がトレードオフの関係にあるからです. したがって, ユースケースに応じて最適な窓関数を選択する必要があります.

オーバーラップアド (AudioWorkletProcessor クラスの拡張) と窓関数の実装

一般的な (Web Audio API に限らない), オーディオ信号処理におけるオーバーラップアドと窓関数は, 以下のようなイメージで, フレームごとに, オーバーラップする部分を最適な窓関数で平滑化します.

このセクションでは, Phaze: a real-time web audio pitch-shifter で利用されている, OLAProcessor クラスの実装を参考に, 理解のために, 少し簡素化して, Web Audio API におけるオーバーラップアドの実装と, そのサブクラスの利用例 (窓関数と高速フーリエ変換の適用) を解説します.

// Filename is './audio-worklets/overlap-add.js'

/**
 * This class extends `AudioWorkletProcessor`.
 */
class OverlapAddProcessor extends AudioWorkletProcessor {
  static RENDER_QUANTUM_SIZE = 128;

  constructor(options) {
    super(options);

    this.frameSize = 2048;
    this.hopSize   = 128;

    this.numberOfOverlaps = this.frameSize / this.hopSize;

    this.inputBuffers       = [[]];  /** @type {[Float32Array[]]} */
    this.inputBuffersHead   = [[]];  /** @type {[Float32Array[]]} */
    this.inputBuffersToSend = [[]];  /** @type {[Float32Array[]]} */

    this.outputBuffers           = [[]];  /** @type {[Float32Array[]]} */
    this.outputBuffersToRetrieve = [[]];  /** @type {[Float32Array[]]} */

    if (options.processorOptions) {
      this.frameSize = options.processorOptions.frameSize ?? 2048;
    }

    this.allocateInputChannels(1);
    this.allocateOutputChannels(1);
  }

  /**
   * @param {[Float32Array[]]} inputs
   * @param {[Float32Array[]]} outputs
   * @param {{ [parameterName: string]: Float32Array }} parameters
   * @abstract
   */
  processOverlapAdd(inputs, outputs, parameters) {}

  /**
   * @param {[Float32Array[]]} inputs
   * @param {[Float32Array[]]} outputs
   * @param {{ [parameterName: string]: Float32Array }} parameters
   * @override
   */
  process(inputs, outputs, parameters) {
    this.reallocateChannelsIfNeeded(inputs, outputs);

    this.readInputs(inputs);
    this.shiftInputBuffers();
    this.prepareInputBuffersToSend();
    this.processOverlapAdd(this.inputBuffersToSend, this.outputBuffersToRetrieve, parameters);
    this.handleOutputBuffersToRetrieve();
    this.writeOutputs(outputs);
    this.shiftOutputBuffers();

    return true;
  }

  reallocateChannelsIfNeeded(inputs, outputs) {
    const inputNumberOfChannels = inputs[0].length;

    if (inputNumberOfChannels !== this.inputBuffers[0].length) {
      this.allocateInputChannels(inputNumberOfChannels);
    }

    const outputNumberOfChannels = outputs[0].length;

    if (outputNumberOfChannels !== this.outputBuffers[0].length) {
      this.allocateOutputChannels(outputNumberOfChannels);
    }
  }

  allocateInputChannels(numberOfChannels) {
    this.inputBuffers = [[]];

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      this.inputBuffers[0][channelNumber] = new Float32Array(this.frameSize + OverlapAddProcessor.RENDER_QUANTUM_SIZE);
    }

    this.inputBuffersHead   = [[]];
    this.inputBuffersToSend = [[]];

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      this.inputBuffersHead[0][channelNumber]   = this.inputBuffers[0][channelNumber].subarray(0, this.frameSize);
      this.inputBuffersToSend[0][channelNumber] = new Float32Array(this.frameSize);
    }
  }

  allocateOutputChannels(numberOfChannels) {
    this.outputBuffers = [[]];

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      this.outputBuffers[0][channelNumber] = new Float32Array(this.frameSize);
    }

    this.outputBuffersToRetrieve = [[]];

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      this.outputBuffersToRetrieve[0][channelNumber] = new Float32Array(this.frameSize);
    }
  }

  readInputs(inputs) {
    if (inputs[0].length && (inputs[0][0].length === 0)) {
      for (let channelNumber = 0; channelNumber < this.inputBuffers[0].length; channelNumber++) {
        this.inputBuffers[0][channelNumber].fill(0, this.frameSize);
      }

      return;
    }

    for (let channelNumber = 0; channelNumber < this.inputBuffers[0].length; channelNumber++) {
      this.inputBuffers[0][channelNumber].set(inputs[0][channelNumber], this.frameSize);
    }
  }

  writeOutputs(outputs) {
    for (let channelNumber = 0; channelNumber < this.inputBuffers[0].length; channelNumber++) {
      outputs[0][channelNumber].set(this.outputBuffers[0][channelNumber].subarray(0, OverlapAddProcessor.RENDER_QUANTUM_SIZE));
    }
  }

  shiftInputBuffers() {
    for (let channelNumber = 0; channelNumber < this.inputBuffers[0].length; channelNumber++) {
      this.inputBuffers[0][channelNumber].copyWithin(0, OverlapAddProcessor.RENDER_QUANTUM_SIZE);
    }
  }

  shiftOutputBuffers() {
    for (let channelNumber = 0; channelNumber < this.outputBuffers[0].length; channelNumber++) {
      this.outputBuffers[0][channelNumber].copyWithin(0, OverlapAddProcessor.RENDER_QUANTUM_SIZE);
      this.outputBuffers[0][channelNumber].subarray(this.frameSize - OverlapAddProcessor.RENDER_QUANTUM_SIZE).fill(0);
    }
  }

  prepareInputBuffersToSend() {
    for (let channelNumber = 0; channelNumber < this.inputBuffers[0].length; channelNumber++) {
      this.inputBuffersToSend[0][channelNumber].set(this.inputBuffersHead[0][channelNumber]);
    }
  }

  handleOutputBuffersToRetrieve() {
    for (let channelNumber = 0; channelNumber < this.outputBuffers[0].length; channelNumber++) {
      for (let n = 0; n < this.frameSize; n++) {
        this.outputBuffers[0][channelNumber][n] += this.outputBuffersToRetrieve[0][channelNumber][n] / this.numberOfOverlaps;
      }
    }
  }
}

// Filename is './audio-worklets/bypass-overlap-add.js'

/**
 * This class extends `OverlapAddProcessor`.
 */
class BypassOverlapAddProcessor extends OverlapAddProcessor {
  constructor(options) {
    super(options);

    this.hanningWindow = this.createHanningWindow(this.frameSize);
  }

  /** @overdrive */
  processOverlapAdd(inputs, outputs, parameters) {
    const input  = inputs[0];
    const output = outputs[0];

    const numberOfChannels = input.length;

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      const reals = new Float32Array(this.frameSize);
      const imags = new Float32Array(this.frameSize);

      for (let n = 0; n < this.frameSize; n++) {
        reals[n] = this.hanningWindow[n] * input[channelNumber][n];
      }

      FFT(reals, imags, this.frameSize);

      // Bypass

      IFFT(reals, imags, this.frameSize);

      for (let n = 0; n < this.frameSize; n++) {
        output[channelNumber][n] = this.hanningWindow[n] * reals[n];
      }
    }
  }

  createHanningWindow(size) {
    const w = new Float32Array(size);

    for (let n = 0; n < size; n++) {
      w[n] = 0.5 - 0.5 * Math.cos((2 * Math.PI * n) / size);
    }

    return w;
  }
}

registerProcessor('BypassOverlapAddProcessor', BypassOverlapAddProcessor);

/**
 * This class extends `AudioWorkletProcessor`.
 */
class OverlapAddProcessor extends AudioWorkletProcessor {
  static RENDER_QUANTUM_SIZE = 128;

  constructor(options) {
    super(options);

    // ...

    if (options.processorOptions) {
      this.frameSize = options.processorOptions.frameSize ?? 2048;
    }

    // ...
  }

  // ...
}

<button type="button" id="button-bypass-overlap-add-processor">start</button>

const context = new AudioContext();

// './audio-worklets/bypass-overlap-add.js' is URL that has subclass that extends `OverlapAddProcessor`
context.audioWorklet.addModule('./audio-worklets/bypass-overlap-add.js')
  .then(() => {
    let oscillator = null;
    let processor  = null;

    const onDown = () => {
      if ((oscillator !== null) || (processor !== null)) {
        return;
      }

      oscillator = new OscillatorNode(context);

      processor = new AudioWorkletNode(context, 'BypassOverlapAddProcessor', {
        processorOptions: {
          frameSize: 1024
        }
      });

      // OscillatorNode (Input) -> AudioWorkletNode (Bypass) -> AudioDestinationNode (Output)
      oscillator.connect(processor);
      processor.connect(context.destination);

      oscillator.start(0);

      buttonElement.textContent = 'stop'
    };

    const onUp = () => {
      if ((oscillator === null) || (processor === null)) {
        return;
      }

      oscillator.stop(0);

      processor.disconnect(context.destination);

      oscillator = null;
      processor  = null;

      buttonElement.textContent = 'start'
    };

    const buttonElement = document.getElementById('button-bypass-overlap-add-processor');

    buttonElement.addEventListener('mousedown', onDown);
    buttonElement.addEventListener('touchstart', onDown);
    buttonElement.addEventListener('mouseup', onUp);
    buttonElement.addEventListener('touchend', onUp);
  })
  .catch((error) => {
    // error handling
  });

ノイズサプレッサー

// Filename is './audio-worklets/noise-gate.js'

class NoiseGateProcessor extends AudioWorkletProcessor {
  constructor(options) {
    super(options);

    this.level = 0;

    this.port.onmessage = (event) => {
      if ((event.data.level >= 0) && (event.data.level <= 1))  {
        this.level = event.data.level;
      }
    };
  }

  process(inputs, outputs) {
    const input  = inputs[0];
    const output = outputs[0];

    const numberOfChannels = input.length;

    for (let channelNumber = 0; channelNumber < input.length; channelNumber++) {
      const bufferSize = input[channelNumber].length;

      for (let n = 0; n < bufferSize; n++) {
        output[channelNumber][n] = (Math.abs(input[channelNumber][n]) > this.level) ? input[channelNumber][n] : 0;
      }
    }

    return true;
  }
}

registerProcessor('NoiseGateProcessor', NoiseGateProcessor);

// Filename is './audio-worklets/noise-suppressor.js'

class NoiseSuppressorProcessor extends OverlapAddProcessor {
  static createHanningWindow(size) {
    const w = new Float32Array(size);

    for (let n = 0; n < size; n++) {
      w[n] = 0.5 - 0.5 * Math.cos((2 * Math.PI * n) / size);
    }

    return w;
  }

  constructor(options) {
    super(options);

    this.threshold = 0;

    this.hanningWindow = NoiseSuppressorProcessor.createHanningWindow(this.frameSize);

    this.port.onmessage = (event) => {
      if ((event.data.threshold >= 0) && (event.data.threshold <= 1))  {
        this.threshold = event.data.threshold;
      }
    };
  }

  /** @overdrive */
  processOverlapAdd(inputs, outputs) {
    const input  = inputs[0];
    const output = outputs[0];

    const numberOfChannels = input.length;

    const fftSize = this.frameSize;

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      const reals = new Float32Array(fftSize);
      const imags = new Float32Array(fftSize);

      for (let n = 0; n < fftSize; n++) {
        reals[n] = this.hanningWindow[n] * input[channelNumber][n];
      }

      FFT(reals, imags, fftSize);

      const amplitudes = new Float32Array(fftSize);
      const phases     = new Float32Array(fftSize);

      for (let k = 0; k < fftSize; k++) {
        amplitudes[k] = Math.sqrt((reals[k] ** 2) + (imags[k] ** 2));

        if ((reals[k] !== 0) && (imags[k] !== 0)) {
          phases[k] = Math.atan2(imags[k], reals[k]);
        }
      }

      for (let k = 0; k < fftSize; k++) {
        amplitudes[k] -= this.threshold;

        if (amplitudes[k] < 0) {
          amplitudes[k] = 0;
        }
      }

      // Euler's formula
      for (let k = 0; k < fftSize; k++) {
        reals[k] = amplitudes[k] * Math.cos(phases[k]);
        imags[k] = amplitudes[k] * Math.sin(phases[k]);
      }

      IFFT(reals, imags, fftSize);

      for (let n = 0; n < fftSize; n++) {
        output[channelNumber][n] = this.hanningWindow[n] * reals[n];
      }
    }
  }
}

registerProcessor('NoiseSuppressorProcessor', NoiseSuppressorProcessor);

<button type="button" id="button-noise-suppressor">start</button>
<label for="range-noise-suppressor-threshold">threshold</label>
<input type="range" id="range-noise-suppressor-threshold" value="0" min="0" max="1" step="0.05" />
<span id="print-noise-suppressor-threshold-value">0.00</span>

const context = new AudioContext();

const buttonElement = document.getElementById('button-noise-suppressor');
const rangeElement  = document.getElementById('range-noise-suppressor-threshold');
const spanElement   = document.getElementById('print-noise-suppressor-threshold-value');

let processor   = null;
let mediaStream = null;

buttonElement.addEventListener('click', async () => {
  buttonElement.setAttribute('disabled', 'disabled');

  if (processor === null) {
    // './audio-worklets/noise-suppressor.js' is URL that has subclass that extends `OverlapAddProcessor`
    await context.audioWorklet.addModule('./audio-worklets/noise-suppressor.js')
  }

  if (mediaStream) {
    const audioTracks = mediaStream.getAudioTracks();

    for (const audioTrack of audioTracks) {
      audioTrack.stop();
    }

    mediaStream = null;

    buttonElement.textContent = 'start';
    buttonElement.removeAttribute('disabled');
    return;
  }

  if (mediaStream === null) {
    mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  }

  const source = new MediaStreamAudioSourceNode(context, { mediaStream });

  processor = new AudioWorkletNode(context, 'NoiseSuppressorProcessor', {
    processorOptions: {
      frameSize: 512
    }
  });

  // MediaStreamAudioSourceNode (Input) -> AudioWorkletNode (Noise Suppressor) -> AudioDestinationNode (Output)
  source.connect(processor);
  processor.connect(context.destination);

  buttonElement.textContent = 'stop';
  buttonElement.removeAttribute('disabled');
});

rangeElement.addEventListener('input', (event) => {
  const threshold = event.currentTarget.valueAsNumber;

  if (processor) {
    processor.port.postMessage({ threshold });
  }

  spanElement.textContent = threshold.toFixed(2);
});

ピッチシフター

ピッチシフターとは, 再生速度 (音長) を変化させずに, 周波数を変化させるエフェクターです (結果的に, ピッチを変化させるエフェクターとなります). オーディオ処理を適用せずに, 再生速度を変化させると周波数も変化しますが, これは物理的な関係があり, 再生速度と周波数は比例関係にあるからです. 実際, AudioBufferSourceNode の playbackRate プロパティで再生速度を 2 倍にするとピッチも 2 倍に, 逆に, 再生速度を 0.5 倍にするとピッチも 0.5 倍になって聴こえます. 一般的に, ピッチシフターは, 再生速度を変化させずに, 周波数のみを変化させるエフェクターを意味します.

ピッチシフターは, 原音とオクターブ違いの音を合成するオクターバー, ペダルでピッチを変化させるワーミー (Whammy) (参考: DigiTech の Whammy), 原音と 3 度や 5 度の音 (ハーモニー) を合成するハーモナイザーなど, 派生するエフェクターが多くあります (楽器演奏において, ピッチシフターだけを利用することは少ないかもしれません).

ピッチシフターのアルゴリズムもいくつかあります. そのすべてを解説することはできないので, このセクションでは, 以下の 2 つを解説します.

• 時間領域の演算だけで実装できるリサンプリングとタイムストレッチを利用した実装 (これは, Adobe Audition で利用されている SOLA (Synchronized Overlap-Add) や, PSOLA (Pitch Synchronous Overlap-Add) の原始的なアルゴリズムです)
• 周波数領域での演算が必要となりますが, より精度の高いピッチシフターが実現できる, フェーズボコーダを利用した実装

周波数領域での演算による, ピッチシフターのアルゴリズムとしては, 正弦波モデル (スペクトルモデル) による, McAulay & Quatieri モデル (Sinusoidal Spectral Modeling) や SMS (Spectral Modeling Synthesis) などがあります (あるいは, これらのアルゴリズムが, フェーズボコーダに利用されている場合もあります).

const context = new AudioContext();

// const rate  = 3 / 2;
// const pitch = 1 / rate;

const rate  = 1.5;
const pitch = 0.66;

fetch('./assets/medias/Schubert-Symphony-No8-Unfinished-1st-2020-VR.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then(async (arrayBuffer) => {
    const audioBuffer = await context.decodeAudioData(arrayBuffer);

    const numberOfChannels = audioBuffer.numberOfChannels;

    const resampleRate = audioBuffer.sampleRate / pitch;

    const length = Math.ceil(audioBuffer.length / rate);

    const pitchShiftAudioBuffer = context.createBuffer(numberOfChannels, length, audioBuffer.sampleRate);

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      const inputBuffer  = audioBuffer.getChannelData(channelNumber);
      const outputBuffer = new Float32Array(length);

      // Time Stretch
      const templateSize = Math.trunc(resampleRate * 0.01);

      // Set the range that correlation function detects peaks is between 5 msec (0.005 sec) and 20 msec (0.02 sec)
      const minPeriod = Math.trunc(resampleRate * 0.005);
      const maxPeriod = Math.trunc(resampleRate * 0.02);

      const x = new Float32Array(templateSize);
      const y = new Float32Array(templateSize);
      const r = new Float32Array(maxPeriod + 1);

      let offset0 = 0;
      let offset1 = 0;

      while ((offset0 + (2 * maxPeriod)) < inputBuffer.length) {
        for (let n = 0; n < templateSize; n++) {
          x[n] = inputBuffer[offset0 + n];
        }

        let maxCorrelation = 0.0;

        let period = minPeriod;

        for (let m = minPeriod; m <= maxPeriod; m++) {
          for (let n = 0; n < templateSize; n++) {
            y[n] = inputBuffer[offset0 + m + n];
          }

          r[m] = 0.0;

          // Correlation function
          for (let n = 0; n < templateSize; n++) {
            r[m] += x[n] * y[n];
          }

          if (r[m] > maxCorrelation) {
            maxCorrelation = r[m];  // The peak of correlation function
            period = m;
          }
        }

        // Overlap-Add
        for (let n = 0; n < period; n++) {
          outputBuffer[offset1 + n]  = inputBuffer[offset0 + n] * ((period - n) / period);  // Monotonically decreasing
          outputBuffer[offset1 + n] += inputBuffer[offset0 + period + n] * (n / period);    // Monotonically increasing
        }

        const offset = Math.round(period / (rate - 1.0));

        for (let n = period; n < offset; n++) {
          if ((offset0 + period + n) >= inputBuffer.length) {
            break;
          }

          outputBuffer[offset1 + n] = inputBuffer[offset0 + period + n];
        }

        offset0 += period + offset;
        offset1 += offset;
      }

      pitchShiftAudioBuffer.copyToChannel(outputBuffer, channelNumber);
    }

    const source = new AudioBufferSourceNode(context, { buffer: pitchShiftAudioBuffer });

    // Resampling
    source.playbackRate.value = pitch;

    source.connect(context.destination);

    source.start(0);
  })
  .catch((error) => {
    // error handling
  });

const context = new AudioContext();

// const rate  = 2 / 3;
// const pitch = 1 / rate;

const rate  = 0.66;
const pitch = 1.5;

fetch('./assets/medias/Schubert-Symphony-No8-Unfinished-1st-2020-VR.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then(async (arrayBuffer) => {
    const audioBuffer = await context.decodeAudioData(arrayBuffer);

    const numberOfChannels = audioBuffer.numberOfChannels;

    const resampleRate = audioBuffer.sampleRate / pitch;

    const length = Math.ceil(audioBuffer.length / rate);

    const pitchShiftAudioBuffer = context.createBuffer(numberOfChannels, length, audioBuffer.sampleRate);

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      const inputBuffer  = audioBuffer.getChannelData(channelNumber);
      const outputBuffer = new Float32Array(length);

      // Time Stretch
      const templateSize = Math.trunc(resampleRate * 0.01);

      // Set the range that correlation function detects peaks is between 5 msec (0.005 sec) and 20 msec (0.02 sec)
      const minPeriod = Math.trunc(resampleRate * 0.005);
      const maxPeriod = Math.trunc(resampleRate * 0.02);

      const x = new Float32Array(templateSize);
      const y = new Float32Array(templateSize);
      const r = new Float32Array(maxPeriod + 1);

      let offset0 = 0;
      let offset1 = 0;

      while ((offset0 + (2 * maxPeriod)) < inputBuffer.length) {
        for (let n = 0; n < templateSize; n++) {
          x[n] = inputBuffer[offset0 + n];
        }

        let maxCorrelation = 0.0;
        let period = minPeriod;

        for (let m = minPeriod; m <= maxPeriod; m++) {
          for (let n = 0; n < templateSize; n++) {
            y[n] = inputBuffer[offset0 + m + n];
          }

          r[m] = 0.0;

          // Correlation function
          for (let n = 0; n < templateSize; n++) {
            r[m] += x[n] * y[n];
          }

          if (r[m] > maxCorrelation) {
            maxCorrelation = r[m];  // The peak of correlation function
            period = m;
          }
        }

        for (let n = 0; n < period; n++) {
          outputBuffer[offset1 + n] = inputBuffer[offset0 + n];
        }

        for (let n = 0; n < period; n++) {
          outputBuffer[offset1 + period + n]  = inputBuffer[offset0 + period + n] * ((period - n) / period);  // Monotonically decreasing
          outputBuffer[offset1 + period + n] += inputBuffer[offset0 + n] * (n / period);                      // Monotonically increasing
        }

        const offset = Math.round((period * rate) / (1.0 - rate));

        for (let n = period; n < offset; n++) {
          if ((offset0 + n) >= inputBuffer.length) {
            break;
          }

          outputBuffer[offset1 + period + n] = inputBuffer[offset0 + n];
        }

        offset0 += offset;
        offset1 += period + offset;
      }

      pitchShiftAudioBuffer.copyToChannel(outputBuffer, channelNumber);
    }

    const source = new AudioBufferSourceNode(context, { buffer: pitchShiftAudioBuffer });

    // Resampling
    source.playbackRate.value = pitch;

    source.connect(context.destination);

    source.start(0);
  })
  .catch((error) => {
    // error handling
  });

const context = new AudioContext();

// const pitch = 2 / 3;
const pitch = 0.66;

fetch('./assets/medias/Schubert-Symphony-No8-Unfinished-1st-2020-VR.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then(async (arrayBuffer) => {
    const audioBuffer = await context.decodeAudioData(arrayBuffer);

    const numberOfChannels = audioBuffer.numberOfChannels;

    const length = Math.ceil(audioBuffer.length / pitch);

    const resampledAudioBuffer = context.createBuffer(numberOfChannels, length, audioBuffer.sampleRate);

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      const inputBuffer  = audioBuffer.getChannelData(channelNumber);
      const outputBuffer = new Float32Array(length);

      // Resampling
      for (let n = 0; n < length; n++) {
        const t = pitch * n;
        const m = Math.trunc(t);

        const delta = t - m;

        if ((m >= 0) && ((m + 1) < length)) {
          outputBuffer[n] = (delta * inputBuffer[m + 1]) + ((1 - delta) * inputBuffer[m]);
        }
      }

      resampledAudioBuffer.copyToChannel(outputBuffer, channelNumber);
    }

    const source = new AudioBufferSourceNode(context, { buffer: resampledAudioBuffer });

    source.connect(context.destination);

    source.start(0);
  })
  .catch((error) => {
    // error handling
  }); 

const SIZE_OF_SINC = 24;

function sinc(n) {
  if (n === 0) {
    return 1;
  }

  return Math.sin(n) / n;
}

const context = new AudioContext();

// const pitch = 2 / 3;
const pitch = 0.66;

fetch('./assets/medias/Schubert-Symphony-No8-Unfinished-1st-2020-VR.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then(async (arrayBuffer) => {
    const audioBuffer = await context.decodeAudioData(arrayBuffer);

    const numberOfChannels = audioBuffer.numberOfChannels;

    const length = Math.ceil(audioBuffer.length / pitch);

    const resampledAudioBuffer = context.createBuffer(numberOfChannels, length, audioBuffer.sampleRate);

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      const inputBuffer  = audioBuffer.getChannelData(channelNumber);
      const outputBuffer = new Float32Array(length);

      // Resampling
      for (let n = 0; n < length; n++) {
        const t = pitch * n;
        const offset = Math.trunc(t);

        const halfOfSincSize = SIZE_OF_SINC / 2;

        for (let m = (offset - halfOfSincSize); m <= (offset + halfOfSincSize); m++) {
          if ((m >= 0) && (m < inputBuffer.length)) {
            outputBuffer[n] += inputBuffer[m] * sinc(Math.PI * (t - m));
          }
        }
      }

      resampledAudioBuffer.copyToChannel(outputBuffer, channelNumber);
    }

    const source = new AudioBufferSourceNode(context, { buffer: resampledAudioBuffer });

    source.connect(context.destination);

    source.start(0);
  })
  .catch((error) => {
    // error handling
  });

// Filename is './audio-worklets/pitch-shifter.js'

class PitchShifterProcessor extends OverlapAddProcessor {
  static createHanningWindow(size) {
    const w = new Float32Array(size);

    for (let n = 0; n < size; n++) {
      w[n] = 0.5 - 0.5 * Math.cos((2 * Math.PI * n) / size);
    }

    return w;
  }

  constructor(options) {
    super(options);

    this.pitch = 1;
    this.speed = 1;

    this.timeCursor = 0;

    this.hanningWindow = PitchShifterProcessor.createHanningWindow(this.frameSize);

    this.port.onmessage = (event) => {
      if (event.data.pitch > 0) {
        this.pitch = event.data.pitch;
      }

      if (event.data.speed > 0) {
        this.speed = event.data.speed;
      }
    };
  }

  /** @overdrive */
  processOverlapAdd(inputs, outputs) {
    const input  = inputs[0];
    const output = outputs[0];

    const numberOfChannels = input.length;

    const fftSize = this.frameSize;

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      const reals = new Float32Array(fftSize);
      const imags = new Float32Array(fftSize);

      for (let n = 0; n < fftSize; n++) {
        reals[n] = this.hanningWindow[n] * input[channelNumber][n];
      }

      FFT(reals, imags, fftSize);

      const halfOfFFTSizze = fftSize / 2;
      const bufferSize     = halfOfFFTSizze + 1;

      const magnitudes  = new Float32Array(bufferSize);
      const peakIndexes = new Uint16Array(bufferSize);

      for (let k = 0; k < bufferSize; k++) {
        magnitudes[k] = (reals[k] ** 2) + (imags[k] ** 2);
      }

      let numberOfPeaks = 0;

      // Find peaks
      let index = 2;

      const end = halfOfFFTSizze + 1 - 2;

      while (index < end) {
        const magnitude = magnitudes[index];

        if ((magnitudes[index - 1] >= magnitude) || (magnitudes[index - 2] >= magnitude)) {
          ++index;
          continue;
        }

        if ((magnitudes[index + 1] >= magnitude) || (magnitudes[index + 2] >= magnitude)) {
          ++index;
          continue;
        }

        peakIndexes[numberOfPeaks++] = index;

        index += 2;
      }

      // Shift peaks
      const shiftedReals = new Float32Array(fftSize);
      const shiftedImags = new Float32Array(fftSize);

      for (let k = 0; k < numberOfPeaks; k++) {
        const peakIndex = peakIndexes[k];

        const shiftedPeakIndex = Math.round(peakIndex * this.pitch * (1 / this.speed));

        if (shiftedPeakIndex > bufferSize) {
          break;
        }

        let startIndex = 0;
        let endIndex   = fftSize;;

        if (k > 0) {
          const peakIndexBefore = peakIndexes[k - 1];

          startIndex = peakIndex - Math.floor((peakIndex - peakIndexBefore) / 2);
        }

        if (k < (numberOfPeaks - 1)) {
          const peakIndexAfter = peakIndexes[k + 1];

          endIndex = peakIndex + Math.ceil((peakIndexAfter - peakIndex) / 2);
        }

        const startOffset = startIndex - peakIndex;
        const endOffset   = endIndex   - peakIndex;

        for (let m = startOffset; m < endOffset; m++) {
          const binCountIndex = peakIndex + m;

          const shiftedBinCountIndex = shiftedPeakIndex + m;

          if (shiftedBinCountIndex >= bufferSize) {
            break;
          }

          const omega = (2 * Math.PI * (shiftedBinCountIndex - binCountIndex)) / fftSize;

          const shiftedReal = Math.cos(omega * this.timeCursor);
          const shiftedImag = Math.sin(omega * this.timeCursor);

          shiftedReals[shiftedBinCountIndex] += (reals[binCountIndex] * shiftedReal) - (imags[binCountIndex] * shiftedImag);
          shiftedImags[shiftedBinCountIndex] += (reals[binCountIndex] * shiftedImag) + (imags[binCountIndex] * shiftedReal);
        }
      }

      for (let k = 1; k < halfOfFFTSizze; k++) {
        shiftedReals[fftSize - k] = 0.0 + shiftedReals[k];
        shiftedImags[fftSize - k] = 0.0 - shiftedImags[k];
      }

      IFFT(shiftedReals, shiftedImags, fftSize);

      for (let n = 0; n < fftSize; n++) {
        output[channelNumber][n] = this.hanningWindow[n] * shiftedReals[n];
      }
    }

    this.timeCursor += this.hopSize;
  }
}

registerProcessor('PitchShifterProcessor', PitchShifterProcessor);

<button type="button" id="button-pitch-shifter" disabled>start</button>
<label for="range-pitch-shifter">pitch</label>
<input type="range" id="range-pitch-shifter" disabled value="1" min="0.5" max="4" step="0.05" />
<span id="print-pitch-shifter-value">1.00</span>
<label for="range-time-stretch">speed</label>
<input type="range" id="range-time-stretch" disabled value="1" min="0.5" max="4" step="0.05" />
<span id="print-time-stretch-value">1.00</span>

const context = new AudioContext();

const buttonElement = document.getElementById('button-pitch-shifter');

const rangePitchElement = document.getElementById('range-pitch-shifter');
const rangeSpeedElement = document.getElementById('range-time-stretch');
const spanPitchElement  = document.getElementById('print-pitch-shifter-value');
const spanSpeedElement  = document.getElementById('print-time-stretch-value');

let source    = null;
let processor = null;

let pitch = 1;
let speed = 1;

fetch('./assets/medias/Schubert-Symphony-No8-Unfinished-1st-2020-VR.mp3')
  .then((response) => {
    return response.arrayBuffer();
  })
  .then(async (arrayBuffer) => {
     // './audio-worklets/pitch-shifter.js' is URL that has subclass that extends `OverlapAddProcessor`
     await context.audioWorklet.addModule('./audio-worklets/pitch-shifter.js')

     const buffer = await context.decodeAudioData(arrayBuffer);

     buttonElement.removeAttribute('disabled');
     rangePitchElement.removeAttribute('disabled');
     rangeSpeedElement.removeAttribute('disabled');

     buttonElement.addEventListener('click', () => {
       if ((source === null) && (processor === null)) {
         source    = new AudioBufferSourceNode(context, { buffer, playbackRate: speed });
         processor = new AudioWorkletNode(context, 'PitchShifterProcessor');

         processor.port.postMessage({ pitch, speed });

         // AudioBufferSourceNode (Input) -> AudioWorkletNode (Pitch Shifter) -> AudioDestinationNode (Output)
         source.connect(processor);
         processor.connect(context.destination);

         source.start(0);

         source.onended = () => {
           source = null;

           if (processor) {
             processor.disconnect();
             processor = null;
           }

           buttonElement.textContent = 'start'
         };

         buttonElement.textContent = 'stop'
       } else {
         source.stop(0);

         source = null;

         if (processor) {
           processor.disconnect();
           processor = null;
         }

         buttonElement.textContent = 'start'
       }
     });

     rangePitchElement.addEventListener('input', (event) => {
       pitch = event.currentTarget.valueAsNumber;

       if (processor) {
         processor.port.postMessage({ pitch });
       }

       spanPitchElement.textContent = pitch.toFixed(2);
     });

     rangeSpeedElement.addEventListener('input', (event) => {
       speed = event.currentTarget.valueAsNumber;

       if (source && processor) {
         source.playbackRate.value = speed;
         processor.port.postMessage({ speed });
       }

       spanSpeedElement.textContent = speed.toFixed(2);
     });
  })
  .catch((error) => {
    // error handling
  });

スペクトル領域でのボーカルキャンセラ

AudioWorklet によるオーディオ信号処理の実装例として, 時間領域でのボーカルキャンセラの実装を解説しました. しかしながら, 時間領域でのボーカルキャンセラは実装はシンプルですが, ドラムなど中央に位置する楽器音も取り除かれてしまう, また, ボーカルキャンセラ後の左右のチャンネルのデータは同じになるので, モノラル再生になってしまうというデメリットがありました.

スペクトル領域でのボーカルキャンセラは, 実装は複雑になりますが, ボーカル以外の中央に位置する楽器音は残しつつ, かつ, 左右のチャンネルのデータの特徴は保ちながらステレオ再生が可能になります. 具体的に説明すれば, スペクトル領域での演算にすることで, ボーカルの周波数帯域に範囲を限定して, 左右のチャンネルを減算することで, 時間領域のボーカルキャンセラよりも精度のよいボーカルキャンセラを実装することが可能となります.

時間領域ではボーカル音を対象に除去しているのではなく, 音源の位置関係から結果として除去しているのに対して, スペクトル領域でのボーカルキャンセラは, ボーカル音を対象にして除去するアルゴリズムです.

ただし, スペクトル領域でのボーカルキャンセラでも, 左右のチャンネルデータが必要なので, 対象のオーディオデータはステレオである必要があることには変わりません.

// Filename is './audio-worklets/vocal-canceler-on-spectrum.js'

class SpectrumVocalCancelerProcessor extends OverlapAddProcessor {
  // Safe positive minimum on `float` (6 digits)
  static MINIMUM_AMPLITUDE = 0.000001;

  static createHanningWindow(size) {
    const w = new Float32Array(size);

    for (let n = 0; n < size; n++) {
      w[n] = 0.5 - 0.5 * Math.cos((2 * Math.PI * n) / size);
    }

    return w;
  }

  constructor(options) {
    super(options);

    this.depth        = 0;
    this.minFrequency = 200;
    this.maxFrequency = 8000;
    this.threshold    = 0.05;

    this.hanningWindow = SpectrumVocalCancelerProcessor.createHanningWindow(this.frameSize);

    this.port.onmessage = (event) => {
      if ((event.data.depth >= 0) && (event.data.depth <= 1)) {
        this.depth = event.data.depth;
      }

      if ((event.data.minFrequency >= 0) && (event.data.minFrequency < this.maxFrequency)) {
        this.minFrequency = event.data.minFrequency;
      }

      if (event.data.maxFrequency >= this.minFrequency) {
        this.maxFrequency = event.data.maxFrequency;
      }

      if ((event.data.threshold >= 0) && (event.data.threshold <= 1)) {
        this.threshold = event.data.threshold;
      }
    };
  }

  /** @override */
  processOverlapAdd(inputs, outputs) {
    const input  = inputs[0];
    const output = outputs[0];

    if ((input.length === 0) || (output.length === 0)) {
      return true;
    }

    if ((input.length !== 2) || (output.length !== 2)) {
      for (let channelNumber = 0, numberOfChannels = input.length; channelNumber < numberOfChannels; channelNumber++) {
        output[channelNumber].set(input[channelNumber]);
      }

      return true;
    }

    if (this.depth === 0) {
      for (let channelNumber = 0, numberOfChannels = input.length; channelNumber < numberOfChannels; channelNumber++) {
        output[channelNumber].set(input[channelNumber]);
      }

      return true;
    }

    const inputLs = input[0];
    const inputRs = input[1];

    const outputLs = output[0];
    const outputRs = output[1];

    const fftSize = this.frameSize;

    const realLs = new Float32Array(fftSize);
    const realRs = new Float32Array(fftSize);
    const imagLs = new Float32Array(fftSize);
    const imagRs = new Float32Array(fftSize);

    for (let n = 0; n < fftSize; n++) {
      realLs[n] = this.hanningWindow[n] * inputLs[n];
      realRs[n] = this.hanningWindow[n] * inputRs[n];
    }

    FFT(realLs, imagLs, fftSize);
    FFT(realRs, imagRs, fftSize);

    const absLs = new Float32Array(fftSize);
    const absRs = new Float32Array(fftSize);
    const argLs = new Float32Array(fftSize);
    const argRs = new Float32Array(fftSize);

    for (let k = 0; k < fftSize; k++) {
      absLs[k] = Math.sqrt((realLs[k] ** 2) + (imagLs[k] ** 2));
      absRs[k] = Math.sqrt((realRs[k] ** 2) + (imagRs[k] ** 2));
      argLs[k] = Math.atan2(imagLs[k], realLs[k]);
      argRs[k] = Math.atan2(imagRs[k], realRs[k]);
    }

    const minIndex = Math.trunc(this.minFrequency * (fftSize / sampleRate));
    const maxIndex = Math.trunc(this.maxFrequency * (fftSize / sampleRate));

    for (let k = minIndex; k < maxIndex; k++) {
      const numerator   = Math.pow((absLs[k] - absRs[k]), 2);
      const denominator = Math.pow((absLs[k] + absRs[k]), 2);

      if (denominator != 0.0) {
        const diff = numerator / denominator;

        if (diff < this.threshold) {
          absLs[k] = SpectrumVocalCancelerProcessor.MINIMUM_AMPLITUDE;
          absRs[k] = SpectrumVocalCancelerProcessor.MINIMUM_AMPLITUDE;

          absLs[fftSize - k] = absLs[k];
          absRs[fftSize - k] = absRs[k];
        }
      }
    }

    for (let k = 0; k < fftSize; k++) {
      realLs[k] = absLs[k] * Math.cos(argLs[k]);
      realRs[k] = absRs[k] * Math.cos(argRs[k]);
      imagLs[k] = absLs[k] * Math.sin(argLs[k]);
      imagRs[k] = absRs[k] * Math.sin(argRs[k]);
    }

    IFFT(realLs, imagLs, fftSize);
    IFFT(realRs, imagRs, fftSize);

    for (let n = 0; n < fftSize; n++) {
      outputLs[n] = ((1 - this.depth) * inputLs[n]) + (this.depth * (this.hanningWindow[n] * realLs[n]));
      outputRs[n] = ((1 - this.depth) * inputRs[n]) + (this.depth * (this.hanningWindow[n] * realRs[n]));
    }

    return true;
  }
}

registerProcessor('SpectrumVocalCancelerProcessor', SpectrumVocalCancelerProcessor);

上記の, スペクトル領域でのボーカルキャンセラでは, ボーカルの周波数帯域を 200 Hz ~ 8000 Hz と仮定して, その間の振幅スペクトルから, 以下の式で定義される閾値を算出します ($X_{L}\left(k\right)$ は左チャンネルの振幅スペクトル (の配列), $X_{R}\left(k\right)$ は右チャンネルの振幅スペクトル (の配列) を表しています).

この算出した閾値 ($D\left(k\right)$) が, あらかじめ指定した閾値 (変数 threshold) を下回っていれば, ボーカル音とみなして, 32 bit 浮動小数点の保証される正の最小値 (およそ, 小数点以下 6 桁) の振幅に設定することで除去しています (また, 振幅スペクトルは, ナイキスト周波数を軸に線対称となるので, 線対称となる後半のインデックスにも同様の値を設定します).

あとは, メインスレッドの実装例です. threshold はハードコーディングでもよいですが, アプリケーション側から設定可能にすると, 除去レベルを調整しやすいので, 以下のメインスレッドの実装例では, ユーザーインタラクティブに制御可能にしています.

<input type="file" id="file-vocal-canceler" />
<audio id="audio-vocal-canceler" controls></audio>
<label for="range-vocal-canceler-depth">depth</label>
<input type="range" id="range-vocal-canceler-depth" disabled value="0" min="0.5" max="1" step="0.05" />
<span id="print-vocal-canceler-depth-value">0.00</span>
<label for="range-vocal-canceler-min-frequency">minFrequency</label>
<input type="range" id="range-vocal-canceler-min-frequency" disabled value="200" min="100" max="16000" step="100" />
<span id="print-vocal-canceler-min-frequency-value">2000 Hz</span>
<label for="range-vocal-canceler-range">range (maxFrequency)</label>
<input type="range" id="range-vocal-canceler-range" disabled value="7800" min="100" max="16000" step="100" />
<span id="print-vocal-canceler-range-value">7800 Hz (8000 Hz)</span>
<label for="range-vocal-canceler-threshold">threshold</label>
<input type="range" id="range-vocal-canceler-threshold" disabled value="0.5" min="0" max="1" step="0.05" />
<span id="print-vocal-canceler-threshold-value">0.50</span>

const context = new AudioContext();

const inputElement = document.getElementById('file-vocal-canceler');
const audioElement = document.getElementById('audio-vocal-canceler');

const rangeDepthElement        = document.getElementById('range-vocal-canceler-depth');
const rangeMinFrequencyElement = document.getElementById('range-vocal-canceler-min-frequency');
const rangeRangeElement        = document.getElementById('range-vocal-canceler-range');
const rangeThresholdElement    = document.getElementById('range-vocal-canceler-threshold');
const spanDepthElement         = document.getElementById('print-vocal-canceler-depth-value');
const spanMinFrequencyElement  = document.getElementById('print-vocal-canceler-min-frequency-value');
const spanRangeElement         = document.getElementById('print-vocal-canceler-range-value');
const spanThresholdElement     = document.getElementById('print-vocal-canceler-threshold-value');

let source    = null;
let processor = null;

let depth        = 0;
let minFrequency = 200;
let maxFrequency = 8000;
let threshold    = 0.5;

inputElement.addEventListener('click', async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  rangeDepthElement.removeAttribute('disabled');
  rangeMinFrequencyElement.removeAttribute('disabled');
  rangeRangeElement.removeAttribute('disabled');
  rangeThresholdElement.removeAttribute('disabled');

  context.audioWorklet.addModule('./audio-worklets/vocal-canceler-on-spectrum.js')
    .then(() => {
      processor = new AudioWorkletNode(context, 'SpectrumVocalCancelerProcessor');

      processor.port.postMessage({ depth });
      processor.port.postMessage({ minFrequency });
      processor.port.postMessage({ maxFrequency });
      processor.port.postMessage({ threshold });
    })
    .catch((error) => {
      // error handling
    })
}, { once: true });

inputElement.addEventListener('change', (event) => {
  const file = event.currentTarget.files[0];

  audioElement.src = window.URL.createObjectURL(file);
});

audioElement.addEventListener('loadstart', () => {
  if (processor === null) {
    return;
  }

  if (source === null) {
    source = new MediaElementAudioSourceNode(context, { mediaElement: audioElement });

    // MediaElementAudioSourceNode (Input) -> AudioWorkletNode (Vocal Canceler) -> AudioDestinationNode (Output)
    source.connect(processor);
    processor.connect(context.destination);
  }
});

rangeDepthElement.addEventListener('input', (event) => {
  depth = event.currentTarget.valueAsNumber;

  if (processor) {
    processor.port.postMessage({ depth });
  }

  spanDepthElement.textContent = depth.toFixed(2);
});

rangeMinFrequencyElement.addEventListener('input', (event) => {
  minFrequency = event.currentTarget.valueAsNumber;

  if (processor) {
    processor.port.postMessage({ minFrequency });
  }

  spanMinFrequencyElement.textContent = `${minFrequency} Hz`;
});

rangeRangeElement.addEventListener('input', (event) => {
  const range = event.currentTarget.valueAsNumber;

  maxFrequency = minFrequency + range;

  if (processor) {
    processor.port.postMessage({ maxFrequency });
  }

  spanRangeElement.textContent = `${range} Hz (${maxFrequency} Hz)`;
});

rangeThresholdElement.addEventListener('input', (event) => {
  threshold = event.currentTarget.valueAsNumber;

  if (processor) {
    processor.port.postMessage({ threshold });
  }

  spanThresholdElement.textContent = threshold.toFixed(2);
});

スペクトル領域のボーカルキャンセラでも, 音源によってはあまり除去できない場合もあるかと思います. また, ボーカルの周波数帯域と重なるような楽器音などがある場合は, その楽器音も除去されてしまいます. 実は, ボーカルキャンセラを含めた, 音源分離は, まだ完璧なアプローチがない, 研究対象のテーマであり, 今後は, 人工知能の発展とともに, 信号処理のアプローチだけでなく, 機械学習や深層学習のアプローチも取り入れられて発展していくと思われます.

panningModel プロパティ

panningModel プロパティは, 空間音響アルゴリズムを決定するプロパティです. もう少し平易なテキストで説明すると, どれぐらい忠実に 3D オーディオ空間, つまり, 実際の音響空間をシミュレートするかを決定するプロパティです. 指定可能なアルゴリズム (PanningModelType 列挙型) は 2 種類です.

'equalpower' よりも 'HRTF' のほうがより高度な音響空間のアルゴリズムなので, (理論上は) 'HRTF'のほうがより忠実に実際の音響空間をシミュレートします.

distanceModel プロパティ

distanceModel プロパティは, 音がリスナーに伝達するまでの音量減衰のアルゴリズムを決定するプロパティです. 一般的な音響空間では, 近くの音は大きく, 遠くの音は小さく知覚されるはずです. すなわち, その音量減衰現象を Web Audio API でシミュレートするためのアルゴリズムを決定します. 指定可能なアルゴリズム (DistanceModelType 列挙型) は 3 種類です. また, それぞれのアルゴリズにおいて, 減衰の算出式が定義されています.

$f$ は, rolloffFactor プロパティ, $d$ は, 音源からの距離 (positionX などから算出), $d_{\mathrm{max}}$ は, maxDistance プロパティ, $d_{\mathrm{ref}}$ は, refDistance プロパティです.

positionX / positionY / positionZ プロパティ

音源 (パン) の位置を設定するプロパティで, AudioParam 型です. デフォルト値は, いずれも 0 なので, 原点 ((0, 0, 0)) に音源が位置することになります.

初期の仕様では, これらのプロパティは AudioParam 型ではなかったので, setPosition(x, y, z) メソッドで音源の位置を設定する必要がありました. 最新の仕様でも, setPosition メソッドは残っていますが, 非推奨となっているので利用しないほうがよいでしょう.

orientationX / orientationY / orientationZ プロパティ

音源 (パン) の向きを設定するプロパティで, AudioParam 型です. デフォルト値は, (1, 0, 0) なので, x 軸の正の方向 (リスナーの初期位置から見て, 右側方向) を向いています. ベクトルのなす角のみを決定するので, x, y, z それぞれの値の比率が重要となります. 例えば, 初期値をいくら乗算しても, x 軸の方向のどちらかを向くだけです.

音源の向き (なす角) を y 軸や, z 軸方向にも向ける例として, (1, -√2, 1) とすると, 平面手前向きに $\frac{\pi}{4}$, 高さ下方向にも $\frac{\pi}{4}$ の方向を向いた音源に設定できます (ベクトルの大きさは, positionX / positionY / positionZ によって決定されます).

初期の仕様では, これらのプロパティは AudioParam 型ではなかったので, setOrientation(x, y, z) メソッドで音源の向きを設定する必要がありました. 最新の仕様でも, setOrientation メソッドは残っていますが, 非推奨となっているので利用しないほうがよいでしょう.

refDistance / maxDistance / rolloffFactor プロパティ

音量減衰を算出するためのプロパティです (すでに解説しましたが, アルゴリズムは DistanceModelType ごとに異なります).

最も音量減衰への影響が大きいのは, refDistance プロパティです. refDistance プロパティのデフォルト値は 1 です.

maxDistance プロパティは, 音量減衰の限界となる距離を決定するプロパティで, この値を超える距離まで音源とリスナーが離れると, それ以上の音量減衰は発生しません. maxDistance プロパティのデフォルト値は 10000 です.

rolloffFactor プロパティは, 音量減衰の速さを決定するプロパティで, この値が小さいほど緩やかに音量減衰して, 大きいほど急激に音量減衰します. rolloffFactor プロパティのデフォルト値は 1 です.

coneInnerAngle / coneOuterAngle / coneOuterGain プロパティ

これらのプロパティは, サウンドコーンと呼ばれる, 指向性のラウドネスを記述するモデルに関連するので, まずは, サウンドコーンについて解説します.

coneInnerAngle プロパティは, 内部コーンの範囲を決定するプロパティです. 内部コーンの内側では音量減衰が発生しません. coneInnerAngle プロパティのデフォルト値は 360 (ラジアンではなく, 度数) です.

coneOuterAngle プロパティは, 外部コーンの範囲を決定するプロパティです. 内部コーンの外側で, かつ, 外部コーンの内側では coneOuterGain プロパティで設定された音量減衰の減衰率に徐々に近づくように音量減衰が発生します. そして, 外部コーンの外側では coneOuterGain プロパティで設定された値に応じて, 常に一定量の音量減衰が発生します. coneOuterAngle プロパティのデフォルト値は 360 (ラジアンではなく, 度数) です.

coneOuterGain プロパティは, 外部コーンの外側における音量減衰の減衰率を決定するプロパティです. coneOuterGain プロパティのデフォルト値は 0 です.

サウンドコーンを決定するこれら 3 つのプロパティがデフォルト値の場合, パンは向きをもちません (つまり, 無指向性の音源となります). したがって, PannerNode の orientationX / orientationY / orientationZ で指定するパンの向きは 3D オーディオに影響しなくなります.

positionX / positionY / positionZ プロパティ

リスナーの位置を設定するプロパティで, AudioParam 型です. 音源 (パン) と同様に, デフォルト値は, いずれも 0 なので, 原点 ((0, 0, 0)) にリスナーが位置しています.

forwardX / forwardY / forwardZ プロパティ

リスナーの向きを設定するプロパティで, AudioParam 型です. デフォルト値は, (0, 0, -1) なので, z 軸の負の方向を向いています. したがって, 上記のサンプルコードでは, x 軸の -5 にリスナーの位置を移動させたことで, 右側から音が聴こえます. リスナーの位置は同じでも, 逆向き ((0, 0, 1)) に変更すると, 左側から音が聴こえます.

また, PannerNode の orientationX / orientationY / orientationZ プロパティと同様に, ベクトルのなす角のみを決定するので, x, y, z それぞれの値の比率が重要となります.

upX / upY / upZ プロパティ

リスナーの向きを設定するプロパティですが, リスナーの頭部の向きを設定します. ざっくりと言ってしまえば, 上の方を見ている状態や下の方を見ている状態を設定できるということです. これらのプロパティも, AudioParam 型です. デフォルト値は, (0, 1, 0) なので, 正面を向いている状態ということになります.

したがって, 例えば, (1, 1, 0) にすると, x 軸方向に $\frac{\pi}{4}$ 傾いた y 軸の正の方向に頭部が向くことになります.

HTML / CSS

グラフィックス API ではありませんが, HTML と CSS を駆使することで, もっと言ってしまえば, HTML のボックスモデルの矩形を CSS で装飾することで波形描画することができます. しかしながら, 本来の利用目的とは言いがたく, また, 描画のスタイルによってはパス (線) で描画したいケースもあるので, その場合は対応できません.

SVG

HTML と同様の API, つまり, DOM で描画できるグラフィックス API が SVG です (実体は, XML なので DOM で操作できます). SVG の MIME タイプは image/svg+xml で画像データとして扱うことができます. また, ベクター形式なので, 拡大しても鮮明に描画できます (SVG: Scalable Vector Graphics). 描画可能なオブジェクトも, 矩形やパスだけでなく, 多角形, 円や楕円, べジュ曲線などさまざまです (もっとも, 音の視覚化だけであれば, 最低限, 矩形とパス, テキストの描画ができれば十分でしょう). デメリットとしては, Canvas と比較すると DOM 操作による描画 (要素の追加や属性値の設定) なので, パフォーマンスが劣ることです.

Canvas

ビットマップで 1px 単位で RGBA の値を設定して描画することが可能で, Canvas そのものは HTMLElement の 1 つで, 画像コーデックではありませんが (実体 (描画データ) は, ImageData クラスの data プロパティである Uint8ClampedArray の数値データです), JPEG や PNG など様々な画像コーデックにエクスポートすることができます. ローレイヤーな描画 (ImageData クラスを利用した描画) では 1px 単位での描画が可能ですが, 抽象度の高い, 矩形やパス, 楕円, べジュ曲線, テキストなど, オブジェクトの描画やスタイルの設定の API も定義されています. デメリットとしては, ビットマップ形式での描画なので, 鮮明に描画するためには, デバイスピクセルレシオ (devicePixelRatio プロパティ) を考慮して座標やサイズを計算する必要があります.

WebGL

3D のグラフィックス API です. おそらく, 3D オーディオをメインに利用する Web アプリケーションでは必須になるでしょう. しかし, WebGL は仕様が膨大で, さらに, その基礎として CG の学習コストも大きいので, このドキュメンントでは扱いません.

音の視覚化の本質的なロジックを理解するためには, Canvas や SVG などの 2D グラフィックス API で十分だからです.

ちなみに, WebGL の次世代の仕様として, WebGPU が 2025 年 8 月 27 日時点で Candidate Recommendation (勧告候補) の段階にあります.

時間領域の波形描画

時間領域の波形描画で関係のある, AnalyserNode のプロパティは fftSize プロパティのみです. この値は, 時間分解能と周波数分解能に関わってくる値です. 時間領域の波形描画だけを実行するのであれば, この値はできるだけ小さいほうが, 時間分解能としては高くなります.

const context = new AudioContext();

const oscillator = new OscillatorNode(context);
const analyser   = new AnalyserNode(context);

// OscillatorNode (Input) -> AnalyserNode (Analyser) -> AudioDestinationNode (Output)
oscillator.connect(analyser);
analyser.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 5 sec
oscillator.stop(context.currentTime + 5);

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  for (let n = 0; n < analyser.fftSize; n++) {
    // TOOD: Draw time domain wave to SVG or Canvas
  }

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

render();

const context = new AudioContext();

const oscillator = new OscillatorNode(context);
const analyser   = new AnalyserNode(context);

// OscillatorNode (Input) -> AnalyserNode (Analyser) -> AudioDestinationNode (Output)
oscillator.connect(analyser);
analyser.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 5 sec
oscillator.stop(context.currentTime + 5);

// const svg = document.getElementById('svg');
//
// const width  = Number(svg.getAttribute('width') ?? '0');
// const height = Number(svg.getAttribute('height') ?? '0');

// const canvas = document.getElementById('canvas');
//
// const width  = canvas.width;
// const height = canvas.height;

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (width / analyser.fftSize);
    const y = (1 - data[n]) * (height / 2);
  }

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

render();

const context = new AudioContext();

const oscillator = new OscillatorNode(context);
const analyser   = new AnalyserNode(context);

// OscillatorNode (Input) -> AnalyserNode (Analyser) -> AudioDestinationNode (Output)
oscillator.connect(analyser);
analyser.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 5 sec
oscillator.stop(context.currentTime + 5);

const svg = document.getElementById('svg');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

svg.appendChild(path);

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  path.removeAttribute('d');

  let d = '';

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (width / analyser.fftSize);
    const y = (1 - data[n]) * (height / 2);

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

render();

const context = new AudioContext();

const oscillator = new OscillatorNode(context);
const analyser   = new AnalyserNode(context);

// OscillatorNode (Input) -> AnalyserNode (Analyser) -> AudioDestinationNode (Output)
oscillator.connect(analyser);
analyser.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 5 sec
oscillator.stop(context.currentTime + 5);

const canvas = document.getElementById('canvas');

const renderingContext = canvas.getContext('2d');

const width  = canvas.width;
const height = canvas.height;

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  renderingContext.clearRect(0, 0, width, height);

  renderingContext.beginPath();

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (width / analyser.fftSize);
    const y = (1 - data[n]) * (height / 2);

    if (n === 0) {
      renderingContext.moveTo(x, y);
    } else {
      renderingContext.lineTo(x, y);
    }
  }

  // renderingContext.closePath();

  renderingContext.storke();

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

render();

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 128 });

const svg = document.getElementById('svg-animation-time-domain-wave-path');

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'miter');

svg.appendChild(path);

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  path.removeAttribute('d');

  let d = '';

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (width / analyser.fftSize);
    const y = (1 - data[n]) * (height / 2);

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-svg-time-domain-wave-path');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 128 });

const renderingContext = canvas.getContext('2d');

const width  = canvas.width;
const height = canvas.height;

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  renderingContext.clearRect(0, 0, width, height);

  renderingContext.beginPath();

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (width / analyser.fftSize);
    const y = (1 - data[n]) * (height / 2);

    if (n === 0) {
      renderingContext.moveTo(x, y);
    } else {
      renderingContext.lineTo(x, y);
    }
  }

  renderingContext.lineWidth   = 1.5;
  renderingContext.strokeStyle = 'rgb(0 0 255)';

  renderingContext.stroke();

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-canvas-time-domain-wave-path');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 128 });

const svg = document.getElementById('svg-animation-time-domain-wave-path-with-coordinate');

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const innerWidth = width - 24;

const xRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

xRect.setAttribute('x', '0');
xRect.setAttribute('y', ((height / 2) - 1).toString(10));
xRect.setAttribute('width', width.toString(10));
xRect.setAttribute('height', '2');
xRect.setAttribute('stroke', 'none');
xRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(xRect);

const yRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

yRect.setAttribute('x', '24');
yRect.setAttribute('y', '0');
yRect.setAttribute('width', '2');
yRect.setAttribute('height', height.toString(10));
yRect.setAttribute('stroke', 'none');
yRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(yRect);

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'miter');

svg.appendChild(path);

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  path.removeAttribute('d');

  let d = '';

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (innerWidth / analyser.fftSize);
    const y = (1 - data[n]) * (height / 2);

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-svg-time-domain-wave-path-with-coordinate');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 128 });

const canvas           = document.getElementById('canvas-animation-time-domain-wave-path-with-coordinate');
const renderingContext = canvas.getContext('2d');

const width  = canvas.width;
const height = canvas.height;

const innerWidth = width - 24;

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  renderingContext.clearRect(0, 0, width, height);

  renderingContext.fillStyle = 'rgb(153 153 153)';
  renderingContext.fillRect(0, ((height / 2) - 1), width, 2);
  renderingContext.fillRect(24, 0, 2, height);

  renderingContext.beginPath();

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (innerWidth / analyser.fftSize);
    const y = (1 - data[n]) * (height / 2);

    if (n === 0) {
      renderingContext.moveTo(x, y);
    } else {
      renderingContext.lineTo(x, y);
    }
  }

  renderingContext.lineWidth   = 1.5;
  renderingContext.strokeStyle = 'rgb(0 0 255)';

  renderingContext.stroke();

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-canvas-time-domain-wave-path-with-coordinate');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 128 });

const samplingPeriod = 1 / context.sampleRate;

const svg = document.getElementById('svg-animation-time-domain-wave-path-with-coordinate-and-texts');

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const innerWidth = width - 24;

const xRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

xRect.setAttribute('x', '0');
xRect.setAttribute('y', ((height / 2) - 1).toString(10));
xRect.setAttribute('width', width.toString(10));
xRect.setAttribute('height', '2');
xRect.setAttribute('stroke', 'none');
xRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(xRect);

const yRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

yRect.setAttribute('x', '24');
yRect.setAttribute('y', '0');
yRect.setAttribute('width', '2');
yRect.setAttribute('height', height.toString(10));
yRect.setAttribute('stroke', 'none');
yRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(yRect);

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

[1.0, 0.0, -1.0].forEach((amplitude, index) => {
  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = amplitude.toFixed(1);

  let h = 0;

  switch (amplitude) {
    case 1.0: {
      h = 12;
      break;
    }

    case 0.0: {
      h = -4;
      break;
    }

    case -1.0: {
      h = 0;
      break;
    }
  }

  text.setAttribute('x', '24');
  text.setAttribute('y', ((1 - amplitude) * (height / 2) + h).toString(10));
  text.setAttribute('text-anchor', 'end');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
});

for (let n = 0; n < analyser.fftSize; n++) {
  if (n % 16 !== 0) {
    continue;
  }

  const x = n * (innerWidth / analyser.fftSize) + 24 + 4;

  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = `${(n * samplingPeriod * 1000).toFixed(2)} msec`;

  text.setAttribute('x', x);
  text.setAttribute('y', (height / 2 + 12).toString(10));
  text.setAttribute('text-anchor', 'start');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
}

svg.appendChild(g);

const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

xLabel.textContent = 'Time';

xLabel.setAttribute('x', width.toString(10));
xLabel.setAttribute('y', (height / 2 - 8).toString(10));
xLabel.setAttribute('text-anchor', 'end');
xLabel.setAttribute('stroke', 'none');
xLabel.setAttribute('fill', 'rgb(153 153 153)');
xLabel.setAttribute('font-size', '14px');

const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

yLabel.textContent = 'Amplitude';

yLabel.setAttribute('x', '28');
yLabel.setAttribute('y', '12');
yLabel.setAttribute('text-anchor', 'start');
yLabel.setAttribute('stroke', 'none');
yLabel.setAttribute('fill', 'rgb(153 153 153)');
yLabel.setAttribute('font-size', '14px');

svg.appendChild(xLabel);
svg.appendChild(yLabel);

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'miter');

svg.appendChild(path);

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  path.removeAttribute('d');

  let d = '';

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (innerWidth / analyser.fftSize);
    const y = (1 - data[n]) * (height / 2);

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-svg-time-domain-wave-path-with-coordinate-and-texts');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 128 });

const samplingPeriod = 1 / context.sampleRate;

const canvas           = document.getElementById('canvas-animation-time-domain-wave-path-with-coordinate-and-texts');
const renderingContext = canvas.getContext('2d');

const width  = canvas.width;
const height = canvas.height;

const innerWidth = width - 24;

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.fftSize);

  analyser.getFloatTimeDomainData(data);

  renderingContext.clearRect(0, 0, width, height);

  renderingContext.fillStyle = 'rgb(153 153 153)';
  renderingContext.fillRect(0, ((height / 2) - 1), width, 2);
  renderingContext.fillRect(24, 0, 2, height);

  renderingContext.font      = 'Roboto 12px';
  renderingContext.fillStyle = 'rgb(153 153 153)';

  [1.0, 0.0, -1.0].forEach((amplitude, index) => {
    let h = 0;

    switch (amplitude) {
      case 1.0: {
        h = 12;
        break;
      }

      case 0.0: {
        h = -4;
        break;
      }

      case -1.0: {
        h = 0;
        break;
      }
    }

    renderingContext.textAlign = 'end';
    renderingContext.fillText(amplitude.toFixed(1), 24, (((1 - amplitude) * (height / 2)) + h));
  });

  for (let n = 0; n < analyser.fftSize; n++) {
    if (n % 16 !== 0) {
      continue;
    }

    const x = (n * (innerWidth / analyser.fftSize)) + 24 + 4;

    renderingContext.textAlign = 'start';
    renderingContext.fillText(`${(n * samplingPeriod * 1000).toFixed(2)} msec`, x, ((height / 2) + 12));
  }

  renderingContext.font = 'Roboto 14px';

  renderingContext.textAlign = 'end';
  renderingContext.fillText('Time', width, ((height / 2) - 8));

  renderingContext.textAlign = 'start';
  renderingContext.fillText('Amplitude', 28, 12);

  renderingContext.beginPath();

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (innerWidth / analyser.fftSize);
    const y = (1 - data[n]) * (height / 2);

    if (n === 0) {
      renderingContext.moveTo(x, y);
    } else {
      renderingContext.lineTo(x, y);
    }
  }

  renderingContext.lineWidth   = 1.5;
  renderingContext.strokeStyle = 'rgb(0 0 255)';

  renderingContext.stroke();

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-canvas-time-domain-wave-path-with-coordinate-and-texts');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 128 });

const samplingPeriod = 1 / context.sampleRate;

const svg = document.getElementById('svg-animation-time-domain-wave-path-with-coordinate-and-texts-in-uint8');

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const innerWidth = width - 24;

const xRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

xRect.setAttribute('x', '0');
xRect.setAttribute('y', ((height / 2) - 1).toString(10));
xRect.setAttribute('width', width.toString(10));
xRect.setAttribute('height', '2');
xRect.setAttribute('stroke', 'none');
xRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(xRect);

const yRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

yRect.setAttribute('x', '24');
yRect.setAttribute('y', '0');
yRect.setAttribute('width', '2');
yRect.setAttribute('height', height.toString(10));
yRect.setAttribute('stroke', 'none');
yRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(yRect);

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

[1.0, 0.0, -1.0].forEach((amplitude, index) => {
  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = amplitude.toFixed(1);

  let h = 0;

  switch (amplitude) {
    case 1.0: {
      h = 12;
      break;
    }

    case 0.0: {
      h = -4;
      break;
    }

    case -1.0: {
      h = 0;
      break;
    }
  }

  text.setAttribute('x', '24');
  text.setAttribute('y', ((1 - amplitude) * (height / 2) + h).toString(10));
  text.setAttribute('text-anchor', 'end');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
});

for (let n = 0; n < analyser.fftSize; n++) {
  if (n % 16 !== 0) {
    continue;
  }

  const x = n * (innerWidth / analyser.fftSize) + 24 + 4;

  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = `${(n * samplingPeriod * 1000).toFixed(2)} msec`;

  text.setAttribute('x', x);
  text.setAttribute('y', (height / 2 + 12).toString(10));
  text.setAttribute('text-anchor', 'start');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
}

svg.appendChild(g);

const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

xLabel.textContent = 'Time';

xLabel.setAttribute('x', width.toString(10));
xLabel.setAttribute('y', (height / 2 - 8).toString(10));
xLabel.setAttribute('text-anchor', 'end');
xLabel.setAttribute('stroke', 'none');
xLabel.setAttribute('fill', 'rgb(153 153 153)');
xLabel.setAttribute('font-size', '14px');

const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

yLabel.textContent = 'Amplitude';

yLabel.setAttribute('x', '28');
yLabel.setAttribute('y', '12');
yLabel.setAttribute('text-anchor', 'start');
yLabel.setAttribute('stroke', 'none');
yLabel.setAttribute('fill', 'rgb(153 153 153)');
yLabel.setAttribute('font-size', '14px');

svg.appendChild(xLabel);
svg.appendChild(yLabel);

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'miter');

svg.appendChild(path);

let animationId = null;

const render = () => {
  const data = new Uint8Array(analyser.fftSize);

  analyser.getByteTimeDomainData(data);

  path.removeAttribute('d');

  let d = '';

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (innerWidth / analyser.fftSize);
    const y = (1 - data[n] / 255) * height;

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-svg-time-domain-wave-path-with-coordinate-and-texts-in-uint8');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 128 });

const canvas           = document.getElementById('canvas-animation-time-domain-wave-path-with-coordinate-and-texts-in-uint8');
const renderingContext = canvas.getContext('2d');

const width  = canvas.width;
const height = canvas.height;

const innerWidth = width - 24;

let animationId = null;

const render = () => {
  const data = new Uint8Array(analyser.fftSize);

  analyser.getByteTimeDomainData(data);

  renderingContext.clearRect(0, 0, width, height);

  renderingContext.fillStyle = 'rgb(153 153 153)';
  renderingContext.fillRect(0, ((height / 2) - 1), width, 2);
  renderingContext.fillRect(24, 0, 2, height);

  renderingContext.font      = 'Roboto 12px';
  renderingContext.fillStyle = 'rgb(153 153 153)';

  [1.0, 0.0, -1.0].forEach((amplitude, index) => {
    let h = 0;

    switch (amplitude) {
      case 1.0: {
        h = 12;
        break;
      }

      case 0.0: {
        h = -4;
        break;
      }

      case -1.0: {
        h = 0;
        break;
      }
    }

    renderingContext.textAlign = 'end';
    renderingContext.fillText(amplitude.toFixed(1), 24, (((1 - amplitude) * (height / 2)) + h));
  });

  for (let n = 0; n < analyser.fftSize; n++) {
    if (n % 16 !== 0) {
      continue;
    }

    const x = (n * (innerWidth / analyser.fftSize)) + 24 + 4;

    renderingContext.textAlign = 'start';
    renderingContext.fillText(`${(n * samplingPeriod * 1000).toFixed(2)} msec`, x, ((height / 2) + 12));
  }

  renderingContext.font = 'Roboto 14px';

  renderingContext.textAlign = 'end';
  renderingContext.fillText('Time', width, ((height / 2) - 8));

  renderingContext.textAlign = 'start';
  renderingContext.fillText('Amplitude', 28, 12);

  renderingContext.beginPath();

  for (let n = 0; n < analyser.fftSize; n++) {
    const x = n * (innerWidth / analyser.fftSize);
    const y = (1 - (data[n] / 255)) * height;

    if (n === 0) {
      renderingContext.moveTo(x, y);
    } else {
      renderingContext.lineTo(x, y);
    }
  }

  renderingContext.lineWidth   = 1.5;
  renderingContext.strokeStyle = 'rgb(0 0 255)';

  renderingContext.stroke();

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-canvas-time-domain-wave-path-with-coordinate-and-texts-in-uint8');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

周波数領域領域の波形描画 (振幅スペクトルの描画)

周波数領域のスペクトル描画で関係のある, AnalyserNode のプロパティは, getFloatFrequencyData メソッドの場合, fftSize プロパティ (その $\frac{1}{2}$ の値となる frequencyBinCount プロパティ) と smoothingTimeConstant プロパティのみです. getByteFrequencyData メソッドの場合, これらのプロパティに追加して, maxDecibels プロパティと minDecibels プロパティが関連してきます. 時間分解能と周波数分解能で解説しましたが, スペクトル描画のみ場合は, fftSize プロパティはある程度大きくして, 周波数分解能を高くするほうが精度のよい描画となります (もっとも, デフォルトの 2048 サンプルでも十分ですが).

また, getFloatFrequencyData メソッド, getByteFrequencyData メソッドで利用される (FFT のプリプロセス処理となる) 窓関数はブラックマン窓です.

const context = new AudioContext();

const oscillator = new OscillatorNode(context, { type: 'sawtooth' });
const analyser   = new AnalyserNode(context);

// OscillatorNode (Input) -> AnalyserNode (Spectrum Analyser) -> AudioDestinationNode (Output)
oscillator.connect(analyser);
analyser.connect(context.destination);

// Start oscillator immediately
oscillator.start(0);

// Stop oscillator after 5 sec
oscillator.stop(context.currentTime + 5);

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.frequencyBinCount);

  analyser.getFloatFrequencyData(data);

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    // TOOD: Draw amplitude spectrum to SVG or Canvas
  }

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

render();

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 16384 });

const svg = document.getElementById('svg-animation-amplitude-spectrum-path');

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const maxDecibels = 0;
const minDecibels = -60;

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'miter');

svg.appendChild(path);

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.frequencyBinCount);

  analyser.getFloatFrequencyData(data);

  path.removeAttribute('d');

  let d = '';

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    // for Chrome
    if (!Number.isFinite(data[k])) {
      continue;
    }

    const x = k * (width / analyser.frequencyBinCount);
    const y = (0 - data[k]) * (height / (maxDecibels - minDecibels));

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() =' {
    render();
  });
};

const buttonElement = document.getElementById('button-svg-animation-spectrum-path');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context, { type: 'sawtooth' });

  // OscillatorNode (Input) -> AnalyserNode (Spectrum Analyser) -> AudioDestinationNode (Output)
  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 16384 });

const canvas           = document.getElementById('canvas-animation-amplitude-spectrum-path');
const renderingContext = canvas.getContext('2d');

const width  = canvas.width;
const height = canvas.height;

const maxDecibels = 0;
const minDecibels = -60;

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.frequencyBinCount);

  analyser.getFloatFrequencyData(data);

  renderingContext.clearRect(0, 0, width, height);

  renderingContext.beginPath();

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    if (!Number.isFinite(data[k])) {
      continue;
    }

    const x = k * (width / analyser.frequencyBinCount);
    const y = (0 - data[k]) * (height / (maxDecibels - minDecibels));

    if (k === 0) {
      renderingContext.moveTo(x, y);
    } else {
      renderingContext.lineTo(x, y);
    }
  }

  renderingContext.lineWidth   = 1.5;
  renderingContext.strokeStyle = 'rgb(0 0 255)';

  renderingContext.stroke();

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-canvas-animation-spectrum-path');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context, { type: 'sawtooth' });

  // OscillatorNode (Input) -> AnalyserNode (Spectrum Analyser) -> AudioDestinationNode (Output)
  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 16384 });

const svg = document.getElementById('svg-animation-amplitude-spectrum-path-with-coordinate');

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const innerWidth  = width - 48;
const innerHeight = height - 48;
const translateX  = 48;
const translateY  = 24;

const maxDecibels = 0;
const minDecibels = -60;

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'miter');

svg.appendChild(path);

const xRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

xRect.setAttribute('x', translateX.toString(10));
xRect.setAttribute('y', (height - translateY - 1).toString(10));
xRect.setAttribute('width', (width - translateX).toString(10));
xRect.setAttribute('height', '2');
xRect.setAttribute('stroke', 'none');
xRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(xRect);

const yRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

yRect.setAttribute('x', translateX.toString(10));
yRect.setAttribute('y', translateY.toString(10));
yRect.setAttribute('width', '2');
yRect.setAttribute('height', (height - translateX).toString(10));
yRect.setAttribute('stroke', 'none');
yRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(yRect);

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.frequencyBinCount);

  analyser.getFloatFrequencyData(data);

  path.removeAttribute('d');

  let d = '';

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    // for Chrome
    if (!Number.isFinite(data[k])) {
      continue;
    }

    const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;
    const y = Math.min(((0 - data[k]) * (innerHeight / (maxDecibels - minDecibels)) - translateY), (height - translateY));

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() =' {
    render();
  });
};

const buttonElement = document.getElementById('button-svg-amplitude-spectrum-path-with-coordinate');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context, { type: 'sawtooth' });

  // OscillatorNode (Input) -> AnalyserNode (Spectrum Analyser) -> AudioDestinationNode (Output)
  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 16384 });

const canvas           = document.getElementById('canvas-animation-amplitude-spectrum-path-with-coordinate');
const renderingContext = canvas.getContext('2d');

const width  = canvas.width;
const height = canvas.height;

const innerWidth  = width - 48;
const innerHeight = height - 48;
const translateX  = 48;
const translateY  = 24;

const maxDecibels = 0;
const minDecibels = -60;

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.frequencyBinCount);

  analyser.getFloatFrequencyData(data);

  renderingContext.clearRect(0, 0, width, height);

  renderingContext.beginPath();

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    if (!Number.isFinite(data[k])) {
      continue;
    }

    const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;
    const y = Math.min(((0 - data[k]) * (innerHeight / (maxDecibels - minDecibels)) - translateY), (height - translateY));

    if (k === 0) {
      renderingContext.moveTo(x, y);
    } else {
      renderingContext.lineTo(x, y);
    }
  }

  renderingContext.lineWidth   = 1.5;
  renderingContext.strokeStyle = 'rgb(0 0 255)';

  renderingContext.stroke();

  renderingContext.fillStyle = 'rgb(153 153 153)';
  renderingContext.fillRect(translateX, (height - translateY - 1), innerWidth, 2);
  renderingContext.fillRect(translateX, translateY, 2, innerHeight);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-canvas-amplitude-spectrum-path-with-coordinate');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context, { type: 'sawtooth' });

  // OscillatorNode (Input) -> AnalyserNode (Spectrum Analyser) -> AudioDestinationNode (Output)
  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 16384 });

const frequencyResolution = context.sampleRate / analyser.fftSize;

const svg = document.getElementById('svg-animation-amplitude-spectrum-path-with-coordinate-and-texts');

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const innerWidth  = width - 48;
const innerHeight = height - 48;
const translateX  = 48;
const translateY  = 24;

const maxDecibels = 0;
const minDecibels = -60;

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'miter');

svg.appendChild(path);

const xRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

xRect.setAttribute('x', translateX.toString(10));
xRect.setAttribute('y', (height - translateY - 1).toString(10));
xRect.setAttribute('width', (width - translateX).toString(10));
xRect.setAttribute('height', '2');
xRect.setAttribute('stroke', 'none');
xRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(xRect);

const yRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

yRect.setAttribute('x', translateX.toString(10));
yRect.setAttribute('y', translateY.toString(10));
yRect.setAttribute('width', '2');
yRect.setAttribute('height', (height - translateX).toString(10));
yRect.setAttribute('stroke', 'none');
yRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(yRect);

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

[0, -10, -20, -30, -40, -50, -60].forEach((dB, index) => {
  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = `${dB} dB`;

  text.setAttribute('x', '44');
  text.setAttribute('y', (index * (innerHeight / 6) + translateY).toString(10));
  text.setAttribute('text-anchor', 'end');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
});

for (let k = 0; k < analyser.frequencyBinCount; k++) {
  if (k % 1024 !== 0) {
    continue;
  }

  const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;

  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = `${Math.trunc(k * frequencyResolution)} Hz`;

  text.setAttribute('x', x);
  text.setAttribute('y', (height - 8).toString(10));
  text.setAttribute('text-anchor', 'start');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
}

svg.appendChild(g);

const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

xLabel.textContent = 'Frequency (Hz)';

xLabel.setAttribute('x', width.toString(10));
xLabel.setAttribute('y', (height - translateY - 8).toString(10));
xLabel.setAttribute('text-anchor', 'end');
xLabel.setAttribute('stroke', 'none');
xLabel.setAttribute('fill', 'rgb(153 153 153)');
xLabel.setAttribute('font-size', '14px');

const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

yLabel.textContent = 'Amplitude (dB)';

yLabel.setAttribute('x', translateY.toString(10));
yLabel.setAttribute('y', '12');
yLabel.setAttribute('text-anchor', 'start');
yLabel.setAttribute('stroke', 'none');
yLabel.setAttribute('fill', 'rgb(153 153 153)');
yLabel.setAttribute('font-size', '14px');

svg.appendChild(xLabel);
svg.appendChild(yLabel);

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.frequencyBinCount);

  analyser.getFloatFrequencyData(data);

  path.removeAttribute('d');

  let d = '';

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    // for Chrome
    if (!Number.isFinite(data[k])) {
      continue;
    }

    const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;
    const y = Math.min(((0 - data[k]) * (innerHeight / (maxDecibels - minDecibels)) - translateY), (height - translateY));

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() =' {
    render();
  });
};

const buttonElement = document.getElementById('button-svg-amplitude-spectrum-path-with-coordinate-and-texts');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context, { type: 'sawtooth' });

  // OscillatorNode (Input) -> AnalyserNode (Spectrum Analyser) -> AudioDestinationNode (Output)
  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 16384 });

const frequencyResolution = context.sampleRate / analyser.fftSize;

const canvas           = document.getElementById('canvas-animation-amplitude-spectrum-path-with-coordinate-and-texts');
const renderingContext = canvas.getContext('2d');

const width  = canvas.width;
const height = canvas.height;

const innerWidth  = width - 48;
const innerHeight = height - 48;
const translateX  = 48;
const translateY  = 24;

const maxDecibels = 0;
const minDecibels = -60;

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.frequencyBinCount);

  analyser.getFloatFrequencyData(data);

  renderingContext.clearRect(0, 0, width, height);

  renderingContext.beginPath();

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    if (!Number.isFinite(data[k])) {
      continue;
    }

    const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;
    const y = Math.min(((0 - data[k]) * (innerHeight / (maxDecibels - minDecibels)) - translateY), (height - translateY));

    if (k === 0) {
      renderingContext.moveTo(x, y);
    } else {
      renderingContext.lineTo(x, y);
    }
  }

  renderingContext.lineWidth   = 1.5;
  renderingContext.strokeStyle = 'rgb(0 0 255)';

  renderingContext.stroke();

  renderingContext.fillStyle = 'rgb(153 153 153)';
  renderingContext.fillRect(translateX, (height - translateY - 1), innerWidth, 2);
  renderingContext.fillRect(translateX, translateY, 2, innerHeight);

  renderingContext.font = 'Roboto 12px';
  renderingContext.fillStyle = 'rgb(153 153 153)';

  [0, -10, -20, -30, -40, -50, -60].forEach((dB, index) => {
    renderingContext.textAlign = 'end';
    renderingContext.fillText(`${dB} dB`, 44, (index * (innerHeight / 6) + translateY));
  });

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    if (k % 1024 !== 0) {
      continue;
    }

    const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;

    renderingContext.textAlign = 'start';
    renderingContext.fillText(`${k * frequencyResolution} Hz`, x, (height - 8));
  }

  renderingContext.font = 'Roboto 16px';

  renderingContext.textAlign = 'end';
  renderingContext.fillText('Frequency (Hz)', width, (height - translateY - 8));

  renderingContext.textAlign = 'start';
  renderingContext.fillText('Amplitude (dB)', translateY, 12);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-canvas-amplitude-spectrum-path-with-coordinate-and-texts');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context, { type: 'sawtooth' });

  // OscillatorNode (Input) -> AnalyserNode (Spectrum Analyser) -> AudioDestinationNode (Output)
  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 16384, maxDecibels: 0, minDecibels: -60 });

const frequencyResolution = context.sampleRate / analyser.fftSize;

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const innerWidth  = width - 48;
const innerHeight = height - 48;
const translateX  = 48;
const translateY  = 24;

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', lineWidth.toString(10));
path.setAttribute('stroke-linecap', lineCap);
path.setAttribute('stroke-linejoin', lineJoin);

svg.appendChild(path);

const xRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

xRect.setAttribute('x', translateX.toString(10));
xRect.setAttribute('y', (height - translateY - 1).toString(10));
xRect.setAttribute('width', innerWidth.toString(10));
xRect.setAttribute('height', '2');
xRect.setAttribute('stroke', 'none');
xRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(xRect);

const yRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

yRect.setAttribute('x', translateX.toString(10));
yRect.setAttribute('y', translateY.toString(10));
yRect.setAttribute('width', '2');
yRect.setAttribute('height', innerHeight.toString(10));
yRect.setAttribute('stroke', 'none');
yRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(yRect);

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

[1.0, 0.5, 0.0].forEach((amplitude, index) => {
  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = amplitude.toFixed(1);

  text.setAttribute('x', '44');
  text.setAttribute('y', (index * (innerHeight / 2) + translateY).toString(10));
  text.setAttribute('text-anchor', 'end');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
});

for (let k = 0; k < analyser.frequencyBinCount; k++) {
  if (k % 1024 !== 0) {
    continue;
  }

  const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;

  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = `${Math.trunc(k * frequencyResolution)} Hz`;

  text.setAttribute('x', x);
  text.setAttribute('y', (height - 8).toString(10));
  text.setAttribute('text-anchor', 'start');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
}

svg.appendChild(g);

const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

xLabel.textContent = 'Frequency (Hz)';

xLabel.setAttribute('x', width.toString(10));
xLabel.setAttribute('y', (height - translateY - 8).toString(10));
xLabel.setAttribute('text-anchor', 'end');
xLabel.setAttribute('stroke', 'none');
xLabel.setAttribute('fill', 'rgb(153 153 153)');
xLabel.setAttribute('font-size', '14px');

const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

yLabel.textContent = 'Amplitude';

yLabel.setAttribute('x', '28');
yLabel.setAttribute('y', '12');
yLabel.setAttribute('text-anchor', 'start');
yLabel.setAttribute('stroke', 'none');
yLabel.setAttribute('fill', 'rgb(153 153 153)');
yLabel.setAttribute('font-size', '14px');

svg.appendChild(xLabel);
svg.appendChild(yLabel);

let animationId = null;

const render = () => {
  const data = new Uint8Array(analyser.frequencyBinCount);

  analyser.getByteFrequencyData(data);

  path.removeAttribute('d');

  let d = '';

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;
    const y = (1 - data[k] / 255) * innerHeight + translateY;

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-svg-amplitude-spectrum-path-with-coordinate-and-texts-in-uint8');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context, { type: 'sawtooth' });

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 16384, maxDecibels: 0, minDecibels: -60 });

const frequencyResolution = context.sampleRate / analyser.fftSize;

const renderingContext = canvas.getContext('2d');

const width  = canvas.width;
const height = canvas.height;

const innerWidth  = width - 48;
const innerHeight = height - 48;
const translateX  = 48;
const translateY  = 24;

let animationId = null;

const render = () => {
  const data = new Uint8Array(analyser.frequencyBinCount);

  analyser.getByteFrequencyData(data);

  renderingContext.clearRect(0, 0, width, height);

  renderingContext.beginPath();

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;
    const y = (1 - data[k] / 255) * innerHeight + translateY;

    if (k === 0) {
      renderingContext.moveTo(x, y);
    } else {
      renderingContext.lineTo(x, y);
    }
  }

  renderingContext.lineWidth = 1.5;
  renderingContext.strokeStyle = 'rgb(0 0 255)';

  renderingContext.stroke();

  renderingContext.fillStyle = 'rgb(153 153 153)';
  renderingContext.fillRect(translateX, height - translateY - 1, innerWidth, 2);
  renderingContext.fillRect(translateX, translateY, 2, innerHeight);

  renderingContext.font = 'Roboto 12px';
  renderingContext.fillStyle = 'rgb(153 153 153)';

  [1.0, 0.5, 0.0].forEach((amplitude, index) => {
    renderingContext.textAlign = 'end';
    renderingContext.fillText(amplitude.toFixed(1), 44, index * (innerHeight / 2) + translateY);
  });

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    if (k % 1024 !== 0) {
      continue;
    }

    const x = k * (innerWidth / analyser.frequencyBinCount) + translateX;

    renderingContext.textAlign = 'start';
    renderingContext.fillText(`${k * frequencyResolution} Hz`, x, height - 8);
  }

  renderingContext.font = 'Roboto 16px';

  renderingContext.textAlign = 'end';
  renderingContext.fillText('Frequency (Hz)', width, height - translateY - 8);

  renderingContext.textAlign = 'start';
  renderingContext.fillText('Amplitude', 28, 12);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-canvas-amplitude-spectrum-path-with-coordinate-and-texts-in-uint8');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context, { type: 'sawtooth' });

  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

// Filename is './audio-worklets/phase-spectrum.js'

/**
 * This class extends `OverlapAddProcessor`.
 */
class PhaseSpectrumOverlapAddProcessor extends OverlapAddProcessor {
  constructor(options) {
    super(options);

    this.blackmanWindow = this.createBlackmanWindow(this.frameSize);

    this.frequencyBinCount = this.frameSize / 2;
  }

  /** @overdrive */
  processOverlapAdd(inputs, outputs) {
    const input  = inputs[0];
    const output = outputs[0];

    const numberOfChannels = input.length;

    for (let channelNumber = 0; channelNumber < numberOfChannels; channelNumber++) {
      // Bypass
      output[channelNumber].set(input[channelNumber]);

      const phases = new Float32Array(this.frequencyBinCount);

      const reals = new Float32Array(this.frameSize);
      const imags = new Float32Array(this.frameSize);

      for (let n = 0; n < this.frameSize; n++) {
        reals[n] = this.blackmanWindow[n] * input[channelNumber][n];
      }

      FFT(reals, imags, this.frameSize);

      const plot = Math.trunc(440 * (this.frameSize / sampleRate));

      for (let k = 0; k < this.frequencyBinCount; k++) {
        if (k !== plot) {
          continue;
        }

        if ((reals[k] !== 0) && (imags[k] !== 0)) {
          phases[k] = Math.atan2(imags[k], reals[k]);
        }
      }

      // Post to main thread
      this.port.postMessage(phases);
    }
  }

  createBlackmanWindow(size) {
    const w = new Float32Array(size);

    const alpha = 0.16;

    const a0 = (1 - alpha) / 2;
    const a1 = 1 / 2;
    const a2 = alpha / 2;

    for (let n = 0; n < size; n++) {
      w[n] = a0 - a1 * Math.cos((2 * Math.PI * n) / size) + a2 * Math.cos((4 * Math.PI * n) / size);
    }

    return w;
  }
}

registerProcessor('PhaseSpectrumOverlapAddProcessor', PhaseSpectrumOverlapAddProcessor);

const context = new AudioContext();

const fftSize = 2048;

const numberOfPlots = fftSize / 64;

const frequencyResolution = context.sampleRate / fftSize;

const svg = document.getElementById('svg-animation-phase-spectrum-path-with-coordinate-and-texts');

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const innerWidth  = width - 48;
const innerHeight = height - 48;
const translateX  = 48;
const translateY  = 24;

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'miter');

svg.appendChild(path);

const xRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

xRect.setAttribute('x', translateX.toString(10));
xRect.setAttribute('y', (height - translateY - 1).toString(10));
xRect.setAttribute('width', (width - translateX).toString(10));
xRect.setAttribute('height', '2');
xRect.setAttribute('stroke', 'none');
xRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(xRect);

const yRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

yRect.setAttribute('x', translateX.toString(10));
yRect.setAttribute('y', translateY.toString(10));
yRect.setAttribute('width', '2');
yRect.setAttribute('height', (height - translateX).toString(10));
yRect.setAttribute('stroke', 'none');
yRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(yRect);

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

['π', 'π/2', '0', '-π/2', '-π'].forEach((radian, index) => {
  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = `${radian} rad`;

  text.setAttribute('x', '44');
  text.setAttribute('y', (index * (innerHeight / 4) + translateY).toString(10));
  text.setAttribute('text-anchor', 'end');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
});

for (let k = 0; k < numberOfPlots; k++) {
  if ((k % 2) !== 0) {
    continue;
  }

  const x = k * (innerWidth / numberOfPlots) + translateX;

  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = `${Math.trunc(k * frequencyResolution)} Hz`;

  text.setAttribute('x', x);
  text.setAttribute('y', (height - 8).toString(10));
  text.setAttribute('text-anchor', 'start');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
}

svg.appendChild(g);

const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

xLabel.textContent = 'Frequency (Hz)';

xLabel.setAttribute('x', width.toString(10));
xLabel.setAttribute('y', (height - translateY - 8).toString(10));
xLabel.setAttribute('text-anchor', 'end');
xLabel.setAttribute('stroke', 'none');
xLabel.setAttribute('fill', 'rgb(153 153 153)');
xLabel.setAttribute('font-size', '14px');

const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

yLabel.textContent = 'Phase (radian)';

yLabel.setAttribute('x', translateY.toString(10));
yLabel.setAttribute('y', '12');
yLabel.setAttribute('text-anchor', 'start');
yLabel.setAttribute('stroke', 'none');
yLabel.setAttribute('fill', 'rgb(153 153 153)');
yLabel.setAttribute('font-size', '14px');

svg.appendChild(xLabel);
svg.appendChild(yLabel);

const render = (data) => {
  path.removeAttribute('d');

  let d = '';

  for (let k = 0; k < numberOfPlots; k++) {
    const x = k * (innerWidth / numberOfPlots) + translateX;
    const y = ((Math.PI - data[k]) / Math.PI) * (innerHeight / 2) + translateY;

    if (d === '') {
      d += `M${x} ${y}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);
};

const buttonElement = document.getElementById('button-svg-phase-spectrum-path-with-coordinate-and-texts');

let processor  = null;
let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (processor === null) {
    await context.audioWorklet.addModule('./audio-worklets/phase-spectrum.js');

    processor = new AudioWorkletNode(context, 'PhaseSpectrumOverlapAddProcessor', {
      processorOptions: {
        frameSize: fftSize
      }
    });

    processor.port.onmessage = (event) => {
      render(event.data);
    };
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context);

  // OscillatorNode (Input) -> AudioWorkletNode (Phase Spectrum Analyser) -> AudioDestinationNode (Output)
  oscillator.connect(processor);
  processor.connect(context.destination);

  oscillator.start(0);

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

const context = new AudioContext();

const analyser = new AnalyserNode(context, { fftSize: 16384 });

const frequencies = [32, 62.5, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];

const minFrequency = frequencies[0];
const maxFrequency = frequencies[frequencies.length - 1];

const ratio      = maxFrequency / minFrequency;
const log10Ratio = Math.log10(ratio);

const frequencyResolution = context.sampleRate / analyser.fftSize;

const svg = document.getElementById('svg-animation-logarithmic-scale-amplitude-spectrum');

const width  = Number(svg.getAttribute('width') ?? '0');
const height = Number(svg.getAttribute('height') ?? '0');

const innerWidth  = width - 48;
const innerHeight = height - 48;
const translateX  = 48;
const translateY  = 24;

const maxDecibels = 0;
const minDecibels = -60;

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute('stroke', 'rgb(0 0 255)');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'miter');

svg.appendChild(path);

const xRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

xRect.setAttribute('x', translateX.toString(10));
xRect.setAttribute('y', (height - translateY - 1).toString(10));
xRect.setAttribute('width', (width - translateX).toString(10));
xRect.setAttribute('height', '2');
xRect.setAttribute('stroke', 'none');
xRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(xRect);

const yRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

yRect.setAttribute('x', translateX.toString(10));
yRect.setAttribute('y', translateY.toString(10));
yRect.setAttribute('width', '2');
yRect.setAttribute('height', (height - translateX).toString(10));
yRect.setAttribute('stroke', 'none');
yRect.setAttribute('fill', 'rgb(153 153 153)');

svg.appendChild(yRect);

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

[0, -10, -20, -30, -40, -50, -60].forEach((dB, index) => {
  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  text.textContent = `${dB} dB`;

  text.setAttribute('x', '44');
  text.setAttribute('y', (index * (innerHeight / 6) + translateY).toString(10));
  text.setAttribute('text-anchor', 'end');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
});

frequencies.forEach((frequency, index) => {
  const x = (index * (innerWidth / frequencies.length)) + translateX;
  const y = height - 8;

  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

  if (frequency >= 1000) {
    text.textContent = `${Math.trunc(frequency / 1000)} kHz`;
  } else {
    text.textContent = `${frequency} Hz`;
  }

  text.setAttribute('x', x.toString(10));
  text.setAttribute('y', y.toString(10));
  text.setAttribute('text-anchor', 'start');
  text.setAttribute('stroke', 'none');
  text.setAttribute('fill', 'rgb(153 153 153)');
  text.setAttribute('font-size', '12px');

  g.appendChild(text);
});

svg.appendChild(g);

const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

xLabel.textContent = 'Frequency (Hz)';

xLabel.setAttribute('x', width.toString(10));
xLabel.setAttribute('y', (height - translateY - 8).toString(10));
xLabel.setAttribute('text-anchor', 'end');
xLabel.setAttribute('stroke', 'none');
xLabel.setAttribute('fill', 'rgb(153 153 153)');
xLabel.setAttribute('font-size', '14px');

const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');

yLabel.textContent = 'Amplitude (dB)';

yLabel.setAttribute('x', translateY.toString(10));
yLabel.setAttribute('y', '12');
yLabel.setAttribute('text-anchor', 'start');
yLabel.setAttribute('stroke', 'none');
yLabel.setAttribute('fill', 'rgb(153 153 153)');
yLabel.setAttribute('font-size', '14px');

svg.appendChild(xLabel);
svg.appendChild(yLabel);

let animationId = null;

const render = () => {
  const data = new Float32Array(analyser.frequencyBinCount);

  analyser.getFloatFrequencyData(data);

  path.removeAttribute('d');

  let d = '';

  for (let k = 0; k < analyser.frequencyBinCount; k++) {
    if (k === 0) {
      continue;
    }

    // for Chrome
    if (!Number.isFinite(data[k])) {
      continue;
    }

    const frequency = k * frequencyResolution;

    const x = ((Math.log10(frequency / minFrequency) / log10Ratio) * innerWidth) + translateX;
    const y = Math.min(((0 - data[k]) * (innerHeight / (maxDecibels - minDecibels)) - translateY), (height - translateY));

    if (x < translateX) {
      continue;
    }

    if (d === '') {
      d += `M${translateX} ${translateY + innerHeight}`;
    } else {
      d += ` L${x} ${y}`;
    }
  }

  path.setAttribute('d', d);

  animationId = window.requestAnimationFrame(() => {
    render();
  });
};

const buttonElement = document.getElementById('button-svg-logarithmic-scale-amplitude-spectrum');

let oscillator = null;

const onDown = async () => {
  if (context.state !== 'running') {
    await context.resume();
  }

  if (oscillator !== null) {
    return;
  }

  oscillator = new OscillatorNode(context, { type: 'sawtooth' });

  // OscillatorNode (Input) -> AnalyserNode (Spectrum Analyser) -> AudioDestinationNode (Output)
  oscillator.connect(analyser);
  analyser.connect(context.destination);

  oscillator.start(0);

  render();

  buttonElement.textContent = 'stop';
};

const onUp = () => {
  if (oscillator === null) {
    return;
  }

  oscillator.stop(0);

  oscillator = null;

  if (animationId) {
    window.cancelAnimationFrame(animationId);
    animationId = null;
  }

  buttonElement.textContent = 'start';
};

buttonElement.addEventListener('mousedown',  onDown);
buttonElement.addEventListener('touchstart', onDown);
buttonElement.addEventListener('mouseup',    onUp);
buttonElement.addEventListener('touchend',   onUp);

OscillatorType と PeriodicWave

実は, OscillatorNode で生成できる基本波形, すなわち, 正弦波, 矩形波, ノコギリ波, 三角波も PeriodicWave によって生成することが仕様で定義されています.

上記の表の数式は, 仕様から引用した数式を記載していますが, $a\left[n\right]$ は, 実部 (余弦波) の項であり, これはすべての OscillatorType で 0 です. すなわち, 虚部 (正弦波) の項のみを利用して, (ブラウザレンダリングエンジンが) それぞれの OscillatorType を実装することが仕様で決められています. 正弦波は, $b\left[1\right]$ 以外の要素はすべて 0 であり, まさにこれは倍音成分のない, 基本周波数のみで生成される純音であることを意味しています.

また, OscillatorNode で直接生成される基本波形は振幅が正規化されていますが, PeriodicWaveOptions の PeriodicWaveConstraints 型の disableNormalization プロパティを true に設定して (デフォルト値は, false), PeriodicWave インスタンス生成時の, 虚部 (正弦波) の項の Float32Array を上記の定義にしたがってアプリケーション側で設定することで, 正規化しない基本波形を生成することも可能です (ユースケースはわからないですが, 正規化しない基本波形の生成として, 仕様では記載があります).