ウェブオーディオ API に関わる基本概念

オーディオグラフ

ウェブオーディオ API は、オーディオコンテキスト内部でのオーディオ操作に対する処理を含み、モジュラールーティングを可能とするために設計されてきました。それぞれのオーディオノードは基本的なオーディオ処理を行い、他の 1 つ以上のオーディオノードと連結されて、オーディオルーティンググラフを形成します。1つのコンテキスト内であっても、異なるチャンネル構成を持つ複数の音源に対応しています。このモジュール式の設計により、ダイナミックなエフェクトを備えた複雑なオーディオ機能を作成するための柔軟性が確保されています。

オーディオノードは、それら入出力を経由し接続され、単一あるいは複数の音源から開始される一連のチェーンを作り、一つ以上のノードを経由しつつ、最終的な行き先に届き終了します。ただし、たとえば、オーディオデータを視覚化することのみを求める場合などは、このような宛先は省いて構いません。シンプルで典型的なウェブオーディオのワークフローでは、以下のようになります。

1. オーディオコンテキストを作成します。
2. コンテキスト内に音源を生成します（<audio>、オシレーター、ストリームなど）。
3. リバーブ、バイカッドフィルター、パンナーコンプレッサーといった、音響効果用ノードを作成します。
4. オーディオの最終出力先（ユーザーのコンピューターのスピーカーなど）を選択します。
5. 音源ノードを 0 個以上のエフェクトノードに接続し、その後、選択した宛先ノードに接続します。

各入出力は、互いに特定のオーディオレイアウトを代表する、一つ以上のオーディオチャンネルにより構成されます。個別のチャンネル構造それぞれは、モノラル、ステレオ、クアッド、5.1 等を含んでサポートされています。

オーディオはいくつかの方法で取得できます。

• JavaScript 内部で(オシレーターのような)オーディオノードにより、直接オーディオを生成。
• 未加工の PCM データから生成(この場合、該当オーディオコンテキストは、対応しているオーディオフォーマット形式へのデコード手段を有しています)。
• （<video> や <audio> のような）HTML のメディア要素より取得。
• （ウェブカメラやマイクのような）WebRTC MediaStream により直接取得。

オーディオデータ: サンプルとは？

オーディオ信号が処理されるとき、サンプリングが行われます。サンプリングとは連続信号を離散信号へ変換することです。あるいは別の言い方をすると、バンドのライブ演奏のような連続的な音波を、コンピューターがそのオーディオを区別されたブロックで処理できるようになる（離散時間信号の）一連のサンプルに変換します。

より詳しい情報は、ウィキペディアの標本化から見ることができます。

オーディオバッファー: フレーム、サンプル、チャンネルセクション

AudioBuffer は、次の 3 つのパラメータで定義されます。

• チャンネル数（モノラルは 1、ステレオは 2 など）、
• バッファ内のサンプルフレーム数、
• サンプルレート（1 秒あたりに再生されるサンプルフレーム数）。

サンプルとは、特定のチャンネル（ステレオの場合は左または右）内の特定の時点におけるオーディオストリームの値を表す、単一の 32 ビット浮動小数点値のことです。フレーム、またはサンプルフレームとは、特定の時点において再生されるすべてのチャンネルの値の集合のことです。つまり、同時に再生されるすべてのチャンネルのすべてのサンプル（ステレオ音源の場合は 2 つ、5.1ch の場合は 6 つなど）を指します。

サンプルレートとは、1 秒間に再生される、それらサンプルの数（または、1 フレームのサンプルすべてが同時に再生させることから、フレーム）であり、単位は Hz で測定されます。サンプルレートが高まるにつれ、音質は向上します。

モノラルとステレオのオーディオバッファーを見てみましょう。それらは 1 秒間、44100Hz で再生されます。

• モノラルバッファーは 44100 サンプル、44100 フレームで構成され、length プロパティは 44100 となる。
• ステレオバッファーは 88200 サンプル、44100 フレームで構成され、length プロパティは、そのフレーム数に等しいため 44100 のままである。

バッファが再生されると、最も左のサンプルフレームが聞こえ、次にそのサンプルフレームのすぐ隣のサンプルフレームが続いてゆきます。ステレオの場合、両方のチャンネルから同時に聴こえます。サンプルフレームは、チャンネルの数とは独立しているため非常に便利であり、正確にオーディオを取り扱う有効な手段として、時間を表現してくれます。

以下はいくつかの単純なサンプルです。

const context = new AudioContext();
const buffer = new AudioBuffer(context, {
  numberOfChannels: 2,
  length: 22050,
  sampleRate: 44100,
});

この呼び出しをする場合、チャンネル数 2 のステレオバッファーを取得し、AudioContext 上で（非常に一般的で、通常のサウンドカードではほとんどはレートとなる）44100Hz にて再生される音源が、0.5 秒間続きます: 22,050 フレーム/44,100Hz = 0.5 秒。

const context = new AudioContext();
const buffer = new AudioBuffer(context, {
  numberOfChannels: 1,
  length: 22050,
  sampleRate: 22050,
});

この呼び出しをする場合、モノラルバッファーをチャンネル数 1 で取得し、AudioContext 上で 44100Hz にて再生される際に自動で 44100Hz へ再サンプリングされ(したがって 44100 フレームとなり)、1 秒間続きます: 44100 フレーム/44100Hz = 1 秒。

バッファーセクションの平面性対交差性

ウェブオーディオ API は平面的なバッファー形式を採用しています。左右のチャンネルは、以下のように格納されています。

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR （16 フレームのバッファー）

これはオーディオ処理における一般的な形式です。これにより各チャンネルの独立した処理が簡単になります。

代替方式としては、交差的な形式が用いられます。

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR （16 フレームのバッファー）

この形式は、大掛かりな処理を必要としないオーディオを、格納し再生する目的として一般的です。例えばデコード済み MP3 音楽ストリームなどがあります。

ウェブオーディオ API は、オーディオ処理に適することを理由に、平面的なバッファーのみを採用しています。通常は平面的ですが、再生用にオーディオがサウンドカードへ送られる際は、交差的に変換されます。反対に、MP3 オーディオがデコードされる場合、元々は交差形式だったものの、オーディオ処理のため平面形式へと変換されます。

オーディオチャンネル

異なるオーディオバッファーでは、それぞれ異なった数のチャンネルを含んでいます: より基本的なモノラルとステレオ(それぞれチャンネル数 1 と 2)から始まり、より複雑なクアッドもしくは 5.1 のような、異なるサウンドサンプルが各チャンネルに含まれ、よりリッチなオーディオ体験を導くセットもあります。チャンネルは通常、以下のテーブルに示される、標準的な略語によって示されます:

アップミキシングとダウンミキシング

入力と出力のチャンネル数が一致しない場合、以下のルールに基づいてアップミキシングまたはダウンミキシングが行われます。これはAudioNode.channelInterpretation プロパティを speakers または discrete へとセットしてコントロールできます。

視覚化

原則、オーディオ視覚化は出力オーディオデータ(基本的にはゲインまたは周波数データ)に時間毎にアクセスすることで行われ、更にグラフなどの視覚化出力へ渡すためのグラフィカル技術が用いられます。ウェブオーディオ API は AnalyserNode で、経由して渡されたオーディオ信号を変換せず利用することができます。ただしその出力は、<canvas> などのような視覚化技術へ受け渡せるオーディオデータです。

以下のメソッドを利用して、データの取得が可能です。

AnalyserNode.getFloatFrequencyData()

現在の周波数データを渡された Float32Array 型配列にコピーします。

AnalyserNode.getByteFrequencyData()

現在の周波数データを渡された Uint8Array 型配列(符号なしバイト配列)にコピーします。

AnalyserNode.getFloatTimeDomainData()

現在の波形データまたはタイムドメインデータを渡された Float32Array 型配列にコピーします。

AnalyserNode.getByteTimeDomainData()

現在の波形データまたはタイムドメインデータを渡された Uint8Array 型配列（符号なしバイト配列）にコピーします。

立体化

(ウェブオーディオ API の PannerNode と AudioListener ノードによって操作される)立体音響化によって、オーディオ信号の、空間を介した点における位置や振る舞いをモデル化することができ、そのオーディオをリスナーが聞くことができます。

パンナーの位置は、直行座標の右側に描かれています。ドップラー効果を作るに必要な、速度ベクトルを用いた移動、そして方向コーンを用いた方向性があります。このコーンは、例えば無指向性音源などのため、とても大きくなり得ます。

リスナーの位置は、直行座標の右側に描かれています。度ベクトルを用いた移動と、リスナーの頭がポイントされている(頭部側と顔面側の)二方向ベクターを用いた方向性があります。これらはそれぞれリスナーの頭部の頂点からの方向と、リスナーの鼻にポイントされている方向とを定義しており、これらは直角となっています。

ファンインとファンアウト

オーディオ用語では、fan-in はChannelMergerNode が一連の単一入力ソースを受け、単一マルチチャンネル信号を出力するプロセスを意味します。

Fan-out はその対となるプロセスを意味します。ChannelSplitterNode が一つのマルチチャンネル入力源を受け、複数のモノラル出力信号を出力します。