Basic concepts behind Web Audio API

Web Audio API は、オーディオコンテキスト内部でのオーディオオペレーションに対するハンドリングを含み、モジュラールーティングを可能とするためにデザインされてきました。基本となる音声操作を成す要素は、オーディオルーチングラフを形作るために、互いに接続されるオーディオノードによります。様々なタイプのチャンネルレイアウトと共に、いくつかの音声源もまた、単一のコンテキスト内部にて支持されています。このモジュラーデザインは、複雑なオーディオ機能を、ダイナミックな音響効果と共に創造するために必要な柔軟性を与えています。

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

1. オーディオコンテキストの作成。
2. <audio> タグ、オシレーター、ストリーム等といった、該当コンテキスト内での音声源の作成。
3. リバーブ、バイカッドフィルター、パンナーコンプレッサーといった、音響効果用ノードの作成。
4. 例えばあなたのシステムのスピーカーなど、音声の最終的な行き先の選択。
5. 音声効果を（あるのならば）かけた後、最後に選択した行き先へ届いて終了する、音声源からの接続の確立。

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

音声源はいくつかの方法で取得できます:

• JavaScript 内部で(オシレーターのような)オーディオノードにより、直接音声を生成。
• 未加工の PCM データから生成(この場合、該当オーディオコンテキストは、対応している音声フォーマット形式へのデコード手段を有しています)。
• (<video> や <audio> のような)HTML media elements より取得。
• (webcam やマイクロフォンのような)Web RTC MediaStream により直接取得。

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

より詳しい情報は、Wikipedia の Sampling(Signal processing)から見ることができます。

AudioBufferは、チャンネルの数(モノラルの場合は 1,ステレオの場合は 2、等)、バッファー長すなわちバッファーに格納されているサンプルフレーム数、サンプルレートすなわち 1 秒間に再生されるサンプルフレーム数を、そのパラメーターとして持っています。

例として、float32 型の値 1 つは、(ステレオの場合は左側あるいは右側といった)特定のチャンネルにおいて、各特定時点おけるオーディオストリームの値を表しています。フレームまたはサンプルフレームは、一定時点における、音声を再生する全チャンネル分の値すべてのまとまりです。全チャンネルの全サンプルが一緒に再生されます(ステレオならば 2 チャンネル分、5.1 ならば 6 チャンネル分、等)。

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

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

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

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

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

var context = new AudioContext();
var buffer = context.createBuffer(2, 22050, 44100);

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

var context = new AudioContext();
var buffer = context.createBuffer(1, 22050, 22050);

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

Web AudioAPI は平面的なバッファー形式を採用しています。左右のチャンネルは、以下のように格納されています:

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)

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

代わりの方式としては、交差的な形式が用いられます:

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)

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

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

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

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

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

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

AnalyserNode.getFloatFrequencyData()

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

AnalyserNode.getByteFrequencyData()

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

AnalyserNode.getFloatTimeDomainData()

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

AnalyserNode.getByteTimeDomainData()

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

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

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

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

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

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