Web Audio API

Web Audio API はウェブ上で音声を扱うための強力で多機能なシステムを提供します。これにより開発者は音源を選択したり、エフェクトを加えたり、ビジュアライゼーションを加えたり、パンニングなどの特殊効果を適用したり、他にもたくさんのいろいろなことができるようになります。

Web audio の概念と利用方法

Web Audio API は音声操作をオーディオコンテキスト内の操作として実現し、モジュラールーティングできるようにデザインされています。基本的な操作は オーディオノードとして表現されています。これを接続することで、オーディオグラフを作成します。チャンネル構成の異なる複数の音源も 1 つのコンテキスト内で扱えます。この構成によって、複雑で動的な音声操作を実現できるようになっています。

オーディオノードは、入力と出力によってチェーンと単純なウェブにリンクされています。通常、1 つまたは複数の音源から始まります。音源は、非常に小さなタイムスライス、多くの場合は 1秒間に数万個のサウンドインテンシティ (サンプル) の配列を提供します。これらは数学的に計算されたもの (OscillatorNode など) や、音声ファイルや動画ファイル (AudioBufferSourceNode や MediaElementAudioSourceNode (en-US) など) やオーディオストリーム (MediaStreamAudioSourceNode (en-US)) からの録音である場合もあります。実際には、サウンドファイルは、マイクや電気楽器から入ってきた音の強さそのものを録音したものであり、それがミックスされて一つの複雑な波になっています。

ノードの出力は他のノードの入力に紐付けられます。つまり、入力ストリームにミックスや編集をして他へ出力できるわけです。一般的な編集の例としては音量の変更です( GainNode (en-US) )。意図した効果を十分に施したあと、ユーザーに音声を聞かせたい場合、サウンドをスピーカーやヘッドオンに流すために、AudioContext.destination の入力に紐付ける必要があります。

簡潔で通常の Web Audio の使い方は次のようになります:

オーディオコンテキストを作成する
コンテキストの中で、<audio>,オシレーター,ストリームなどの音源を作成する
リバーブ・フィルター・パンナー・コンプレッサーなどのエフェクトノードを作成する
最終的な音声の到達先を選ぶ(例えばスピーカー)
音源をエフェクトに繋げ、エフェクトを到達先(destination)に繋げる

オーディオコンテキストと書かれた外側のボックスと、音源、エフェクト、デスティネーションと書かれた3つのボックスからなるシンプルなボックスダイアグラムです。3つのボックスの間には矢印があり、オーディオ情報の流れを示しています。

タイミングは高精度で低遅延に制御されます。正確にイベントに反応したり特定の音声サンプルにアクセスしたりすることができます。ドラムマシンやシーケンサーのようなアプリケーションを作ることができます。

Web Audio API では、立体音響を制御することもできます。ソースリスナーモデルに基づいたシステムを使用することで、パンモデルを制御し、音源の移動 (またはリスナーの移動) によって引き起こされる距離に起因する減衰を処理することができます。

Web Audio API の理論に関する詳細は Basic concepts behind Web Audio API をご覧ください。

Web Audio API がターゲットとする人

Web Audio API は音声技術に馴染みがない人にとって、怖気づくかもしれません。また、多くの機能があるため、開発者にとってとっつきにくいものになっています。

Web Audio API の用途としては、futurelibrary.no のような雰囲気作りのためやフォームの検証に音を活用するために、単に音声をウェブサイトに組み込むために使用できます。一方で、高度な対話型ツールの作成にも利用できます。こうしたことを踏まえると、開発者とミュージシャンの双方に適していると言えます。

プログラミングは得意だけど API の構造と用語の解説が必要な人のために、簡単なチュートリアルがあります。

また、Web Audio API の背景にある基本理念に関する記事もあり、特にこの API の範囲でデジタルオーディオがどのように動作するのかを理解するのに役立ちます。また API の基礎となる優れた概念の紹介も含んでいます。

プログラムを書く作業はカードゲームに例えられます。ルールを学んで遊んでみて、またルールを学んで再び遊んでみて・・・。したがって最初のチュートリアルと記事を見たあとにピンとこなかった場合、最初のチュートリアルを拡張して、学んだことを実践して、段階的に高度なことを学んでいく発展的なチュートリアル (en-US)があります。

それとは別に、この API のすべての機能を網羅したチュートリアルとリファレンスを用意しています。このページのサイドバーを参照してください。

音楽的な側面に精通し、音楽理論の概念に精通し、楽器の構築を開始したい場合は、発展的チュートリアルやその他の解説を基に制作に移る事ができるでしょう(上記のリンク付きチュートリアルでは、スケジューリングに関する注意事項、オーダーメイドの発振器やエンベロープの作成、LFO などについて説明しています) 。

プログラミングの基本に慣れていない場合は、まず初級者向けの JavaScript チュートリアルを参照してから、このページに戻ってください。初級者向けの JavaScript学習モジュールを参照してください。

Web Audio API インターフェイス

Web Audio API は全部で 28 のインターフェイスと関連するイベントを持ちます。それらは機能的に 9 個のカテゴリに分けられます。

一般的なオーディオグラフの定義

Web Audio API で利用するオーディオグラフのコンテナと、その構成要素は以下の通りです。

AudioContext: 音声モジュールを組み合わせて作成される、音声処理のグラフを表します。グラフ内の各モジュールは AudioNode として表現されています。オーディオコンテキストは、コンテキスト内での処理を担当するノードの作成を行います。
AudioContextOptions (en-US): AudioContextOptions は AudioContext を作成するときにオプションを渡したいときに使用します。
AudioNode: AudioNode インターフェイスは音声処理のモジュールの表現しています。これには<audio>要素や<video> 要素のような音源、音声の出力先、BiquadFilterNode (en-US) や GainNode (en-US)) のようなフィルターなどが含まれます。
AudioParam: AudioParam インターフェイスは AudioNode の持つような、音声に関するパラメータを表現しています。値をセットするだけでなく、差分を指定することも可能です。また指定した時間やパターンで、値を変更をすることもできます。
AudioParamMap (en-US): AudioParam のマップのようなインターフェイスを提供します。つまり forEach()、get()、has()、keys()、values() メソッドや size プロパティが使えます。
BaseAudioContext (en-US): BaseAudioContext インターフェイスはオンライン音声処理グラフ( AudioContext)やオフライン音声処理グラフ( OfflineAudioContext)の基底となるものです。直接 BaseAudioContext を使うことはなく、これを継承するこれら 2 つのインターフェイスを介して使用します。
ended (en-US) (event): ended イベントは、再生が終了した際に発火するイベントです。

音源の定義

Web Audio API 内で利用できる音源は以下の通りです。

AudioScheduledSourceNode: AudioScheduledSourceNode は AudioNode の一種で、いくつかの音源ノードの親インターフェイスです。
OscillatorNode: OscillatorNode はサイン波を出力する AudioNode です。出力する波形の周波数を指定できます。
AudioBuffer: AudioBuffer はメモリー上に展開された短い音声データを表します。AudioContext.createBuffer() によって音声ファイルから、もしくはAudioContext.createBuffer() メソッドによって生データから作成されます。このデータは AudioBufferSourceNode を利用して再生されます。
AudioBufferSourceNode: AudioBufferSourceNode は AudioNode の一種で、メモリー上の音声データを利用した音源です。音声データ自身は AudioBuffer として保存されています。
MediaElementAudioSourceNode (en-US): MediaElementAudioSourceNode は AudioNode の一種で、<audio> 要素や <video> 要素を利用する音源です。
MediaStreamAudioSourceNode (en-US): MediaStreamAudioSourceNode は AudioNode の一種で、マイクや Web カメラといった WebRTC (en-US) MediaStream からの入力を扱える音源です。複数の音声トラックがストリーム上にある場合、id は辞書順(アルファベット順)です。
MediaStreamTrackAudioSourceNode (en-US): MediaStreamTrackAudioSourceNode はAudioNode の一種で、MediaStreamTrack からの入力を扱える音源です。createMediaStreamTrackSource() (en-US) メソッドによって作られたノードの場合、使用するトラックを指定してください。MediaStreamAudioSourceNode 以上の制御を提供します。

オーディオエフェクトフィルターの定義

これらを利用すると、音源からの音声にエフェクトをかけられます。

BiquadFilterNode (en-US): BiquadFilterNode は AudioNode の一種で、単純な低次フィルターです。フィルターやトーンコントロール、グラフィックイコライザで利用されます。BiquadFilterNode の入力と出力はともに 1 つです。
ConvolverNode: ConvolverNode はAudioNode の一種で、Audiobuffer に対して線形畳み込みを行います。リバーブの実現に利用されます。
DelayNode: DelayNode は AudioNode の一種で、delay-line を表します。入力された音声を、遅らせて出力します。
DynamicsCompressorNode (en-US): DynamicsCompressorNode はコンプレッサとして働きます。大きな音の音量を絞ることで、複数の音を同時に再生した時に起きがちな、音のクリッピングや歪みを回避します。
GainNode (en-US): GainNode は AudioNode の一種で、入力された音の音量を指定されたものに変更して出力します。
WaveShaperNode (en-US): WaveShaperNode は AudioNode の一種で、非線形のディストーションエフェクトを実現します。curve 属性に指定された関数を用いて、入力を歪ませます。音を歪ませ、温かみを与えるために用いられます。
PeriodicWave (en-US): OscillatorNode の出力の波形を変えるために用いられます。
IIRFilterNode (en-US): 一般的な無限インパルス応答(IIR)フィルターの実装です。トーン制御デバイスやグラフィックイコライザーの実装に利用できます。

音声の出力先の定義

処理した音声の出力先を、以下のもので定めます。

AudioDestinationNode: AudioDestinationNode はコンテキスト内での出力先を表します。通常はスピーカとなっています。
MediaStreamAudioDestinationNode (en-US): MediaElementAudioSourceNode は音声の出力先となる AudioNode の一種で、WebRTC (en-US) MediaStream と 1 つの AudioMediaStreamTrack から構成されます。Navigator.getUserMedia で取得された MediaStream と同様に扱えます。

分析と可視化

音声の時間領域 / 周波数領域分析には、AnalyserNode を利用します。

AnalyserNode: AnalyserNode を利用すると、音声のリアルタイムに時間領域分析と周波数領域分析が行えます。これを利用すると、音声の可視化が行えます。

オーディオチャンネルの分岐と合成

オーディオチャンネルを分岐したり合成したりするのにこれらのインターフェイスを使います。

ChannelSplitterNode (en-US): The ChannelSplitterNode は音源の複数のチャンネルを別々のモノラル出力へ分離します。
ChannelMergerNode: ChannelMergerNode は異なるモノラルの入力を、1 つの出力へとまとめます。それぞれの入力は、出力内のチャンネルとなります。

立体音響

これらのインターフェイスを使用すると、立体音響のパンニング効果を音源に追加することができます。

AudioListener: AudioListener インターフェイスは聴者の向きと位置を表します。
PannerNode: PannerNode は AudioNode の一種で、空間内での音の振る舞いを規定します。位置はカルテシアンの右手座標系で表され、速度ベクトルで動きを表します。向きはコーンの向きで表現します。
StereoPannerNode: StereoPannerNode インターフェイスは単純なステレオプランナーで、音声ストリームのパン(左右バランス)を調整できます。

JavaScript による音声処理

音声Worklet を使うことで、JavaScript や WebAssembly を使って自作のAudioNodeを定義できます。音声Worklet は Worklet インターフェイスという軽量版 Worker インターフェイスを実装しています。Chrome 66 以降で既定で有効です。

AudioWorklet (en-US): AudioWorklet インターフェイスは AudioContext オブジェクトの audioWorklet (en-US) を通して利用することができ、メインスレッドから実行されるオーディオワークレットにモジュールを追加することができます。
AudioWorkletNode (en-US): AudioWorkletNode インターフェイスは AudioNode の一種で、音声グラフに組み込んだり、対応する AudioWorkletProcessor にメッセージを送信できます。
AudioWorkletProcessor (en-US): AudioWorkletProcessor インターフェイスは AudioWorkletGlobalScope で実行する音声処理コードで、音声の生成・処理・分析を直接行ったり、対応する AudioWorkletNode にメッセージを送信できます。
AudioWorkletGlobalScope (en-US): AudioWorkletGlobalScope インターフェイスは WorkletGlobalScope から派生するオブジェクトで、音声処理スクリプトが実行されるワーカーコンテキストを表現します。メインスレッド上ではなく、ワークレットスレッド上で JavaScript を使って直接オーディオデータの生成、処理、分析ができるように設計されています。

Obsolete: script processor nodes

音声Worklet が定義されるよりも昔、Web Audio API は JavaScript を使用する音声処理に ScriptProcessorNode を利用していました。しかしながら処理がメインスレッドで走るためにパフォーマンスが良くありませんでした。歴史的な理由から ScriptProcessorNode は維持されていますが非推奨であり、将来の規格から取り除かれる予定です。

ScriptProcessorNode: ScriptProcessorNode を利用すると、JavaScript から音声データの生成、処理、分析を行えます。このノードは AudioNode の一種で、入力と出力の二つのバッファとリンクしています。入力バッファに新しいデータがセットされる度に AudioProcessingEvent インターフェイスを実装したイベントが生起します。イベントハンドラは出力バッファにデータをセットして処理を終了します。
audioprocess (en-US) (event): audioprocess イベントは ScriptProcessorNode の処理が可能になった際に発火します。
AudioProcessingEvent: AudioProcessingEvent は ScriptProcessorNode の入力バッファが処理可能になったことを表すイベントです。

オフライン / バックグラウンドでの処理

以下のようにすると、バックグラウンドでオーディオグラフを非常に高速に処理/レンダリングし、端末のスピーカーではなく AudioBuffer にレンダリングすることができます。

OfflineAudioContext: OfflineAudioContext は AudioContext の一種で、AudioNode を組み合わせて、音声処理を行うグラフを表現しています。通常の AudioContext と異なり、OfflineAudioContext は音声を出力せず、バッファ内で高速に処理を行います。
complete (en-US) (event): complete イベントは OfflineAudioContext の処理が終了した時に発火します。
OfflineAudioCompletionEvent (en-US): OfflineAudioCompletionEvent は OfflineAudioContext の処理が終了したことを表します。complete (en-US) イベントは、これを実装しています。

廃止されたインターフェイス

以下のものは、Web Audio API の古い仕様には存在しましたが、現在は廃止され、別のものに置き換えられています。

JavaScriptNode: JavaScript で音声を直接処理できます。廃止され、ScriptProcessorNode に置き換えられています。
WaveTableNode: 定期的な波形変換を行います。廃止され PeriodicWave (en-US) に置き換えられています。

ガイドとチュートリアル

Basic concepts behind Web Audio API: この記事では、アプリを経由した音声伝達方法の設計をする際に、十分な情報に基づいた決断をする助けとなるよう、 Web Audio API の特徴がいかに働いているか、その背後にある音声理論について説明します。この記事はあなたを熟練のサウンドエンジニアにさせることはできないものの、Web Audio API が動く理由を理解するための十分な背景を提供します。
Visualizations with Web Audio API: Web Audio API の最も興味深い機能の 1 つは、オーディオソースから周波数、波形、その他のデータを抽出し、それを使用してビジュアライゼーションを作成する機能です。この記事では、方法について説明し、いくつかの基本的な使用例を示します。

Web Audio API の使用: Web Audio API の入門を見てみましょう。ここではいくつかの概念を短く確認してから、簡単な boombox の例で、音声トラックの読み込み、再生と一時停止、音量やステレオ位置の変更の方法を学びましょう。

例

GitHub の webaudio-example に多数の例が掲載されています。

仕様書

仕様書	状態	備考
Web Audio API	草案

ブラウザーの互換性

BCD tables only load in the browser