Web Music ドキュメント

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) 程度だからです.

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++) {
      for (let n = 0; n < 128; 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++) {
          for (let n = 0; n < 128; n++) {
            output[channelNumber][n] = (2 * Math.random()) - 1;
          }
        }

        break;
      }

      case 'pinknoise': {
        for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
          for (let n = 0; n < 128; 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++) {
          for (let n = 0; n < 128; n++) {
            const white = (2 * Math.random()) - 1;

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

            this.lastOut = (this.lastOut + (0.02 * white)) / 1.02;

            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 128 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++) {
      for (let n = 0; n < 128; 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++) {
      for (let n = 0; n < 128; 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++) {
      for (let n = 0; n < 128; 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/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);

    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++) {
          for (let n = 0; n < 128; n++) {
            output[channelNumber][n] = (2 * Math.random()) - 1;
          }
        }

        break;
      }

      case 'pinknoise': {
        for (let channelNumber = 0, numberOfChannels = output.length; channelNumber < numberOfChannels; channelNumber++) {
          for (let n = 0; n < 128; 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++) {
          for (let n = 0; n < 128; n++) {
            const white = (2 * Math.random()) - 1;

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

            this.lastOut = (this.lastOut + (0.02 * white)) / 1.02;

            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.t = 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 t0 = sampleRate / this.frequency;

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

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

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

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

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

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

        if (++this.t >= t0) {
          this.t = 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.date.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-dept" 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 = 128;

    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 のみゲインなので注意してください.

(余談ですが, sustain という用語は, エンベロープジェネレーターに限らず, 楽器に対しても利用されるものです. 例えば, ピアノのダンパーペダル (右側のペダル) は, サステインペダルとも呼ばれますし, X JAPAN のギタリストである HIDE さんが愛用している, フェルナンデス製のモッキンバードには, サスティナーと呼ばれる機能が搭載されている機種があります. いずれも, 生成した音の余韻 (伸び) をコントロールことが目的です. つまり, 楽器におけるサステインは, エンベロープジェネレーター (やシンセサイザー) における 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;

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

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

エンベロープジェネレーターの実装, すなわち, 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$ で定義される場合もあります.

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

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

余弦波と正弦波で表現されるフーリエ級数に, オイラーの公式 ( $e^{j\theta} = \cos\left(\theta\right) + j\sin\left(\theta\right)$ ) を適用すると, 複素フーリエ級数を導出可能です (より一般化したフーリエ級数).

物理的な観点で理解すると, 複素フーリエ級数は, 余弦波と正弦波の 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 分割するような回転を表現します.

このことから, 回転子は以下のような性質をもっています.

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

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