Web Audio API はウェブ上で音声を扱うための強力で多機能なシステムを提供します。これにより開発者は音源を選択したり、エフェクトを加えたり、ビジュアライゼーションを加えたり、パンニングなどの特殊効果を適用したり、他にもたくさんのいろいろなことができるようになります。
Web audio の概念と利用方法
Web Audio API は音声操作をオーディオコンテキスト内の操作として実現し、モジュラールーティングできるようにデザインされています。基本的な操作は オーディオノードとして表現されています。これを接続することで、オーディオグラフを作成します。チャンネル構成の異なる複数の音源も 1 つのコンテキスト内で扱えます。この構成によって、複雑で動的な音声操作を実現できるようになっています。
オーディオノードは、入力と出力によってチェーンと単純なウェブにリンクされています。通常、1 つまたは複数の音源から始まります。音源は、非常に小さなタイムスライス、多くの場合は 1秒間に数万個のサウンドインテンシティ (サンプル) の配列を提供します。これらは数学的に計算されたもの (OscillatorNode
など) や、音声ファイルや動画ファイル (AudioBufferSourceNode
や MediaElementAudioSourceNode
など) やオーディオストリーム (MediaStreamAudioSourceNode
) からの録音である場合もあります。実際には、サウンドファイルは、マイクや電気楽器から入ってきた音の強さそのものを録音したものであり、それがミックスされて一つの複雑な波になっています。
ノードの出力は他のノードの入力に紐付けられます。つまり、入力ストリームにミックスや編集をして他へ出力できるわけです。一般的な編集の例としては音量の変更です( GainNode
)。意図した効果を十分に施したあと、ユーザーに音声を聞かせたい場合、サウンドをスピーカーやヘッドオンに流すために、AudioContext.destination
の入力に紐付ける必要があります。
簡潔で通常の Web Audio の使い方は次のようになります:
- オーディオコンテキストを作成する
- コンテキストの中で、
<audio>
,オシレーター,ストリームなどの音源を作成する - リバーブ・フィルター・パンナー・コンプレッサーなどのエフェクトノードを作成する
- 最終的な音声の到達先を選ぶ(例えばスピーカー)
- 音源をエフェクトに繋げ、エフェクトを到達先(destination)に繋げる
タイミングは高精度で低遅延に制御されます。正確にイベントに反応したり特定の音声サンプルにアクセスしたりすることができます。ドラムマシンやシーケンサーのようなアプリケーションを作ることができます。
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 の基礎となる優れた概念の紹介も含んでいます。
プログラムを書く作業はカードゲームに例えられます。ルールを学んで遊んでみて、またルールを学んで再び遊んでみて・・・。したがって最初のチュートリアルと記事を見たあとにピンとこなかった場合、最初のチュートリアルを拡張して、学んだことを実践して、段階的に高度なことを学んでいく発展的なチュートリアルがあります。
それとは別に、この API のすべての機能を網羅したチュートリアルとリファレンスを用意しています。このページのサイドバーを参照してください。
音楽的な側面に精通し、音楽理論の概念に精通し、楽器の構築を開始したい場合は、発展的チュートリアルやその他の解説を基に制作に移る事ができるでしょう(上記のリンク付きチュートリアルでは、スケジューリングに関する注意事項、オーダーメイドの発振器やエンベロープの作成、LFO などについて説明しています) 。
プログラミングの基本に慣れていない場合は、まず初級者向けの JavaScript チュートリアルを参照してから、このページに戻ってください。初級者向けの JavaScript学習モジュールを参照してください。
Web Audio API インターフェイス
Web Audio API は全部で 28 のインターフェイスと関連するイベントを持ちます。それらは機能的に 9 個のカテゴリに分けられます。
一般的なオーディオグラフの定義
Web Audio API で利用するオーディオグラフのコンテナと、その構成要素は以下の通りです。
AudioContext
- 音声モジュールを組み合わせて作成される、音声処理のグラフを表します。グラフ内の各モジュールは
AudioNode
として表現されています。オーディオコンテキストは、コンテキスト内での処理を担当するノードの作成を行います。 AudioContextOptions
AudioContextOptions
はAudioContext
を作成するときにオプションを渡したいときに使用します。AudioNode
AudioNode
インターフェイスは音声処理のモジュールの表現しています。これには<audio>
要素や<video>
要素のような音源、音声の出力先、BiquadFilterNode
やGainNode
) のようなフィルターなどが含まれます。AudioParam
AudioParam
インターフェイスはAudioNode
の持つような、音声に関するパラメータを表現しています。値をセットするだけでなく、差分を指定することも可能です。また指定した時間やパターンで、値を変更をすることもできます。AudioParamMap
AudioParam
のマップのようなインターフェイスを提供します。つまりforEach()
、get()
、has()
、keys()
、values()
メソッドやsize
プロパティが使えます。BaseAudioContext
BaseAudioContext
インターフェイスはオンライン音声処理グラフ(AudioContext
)やオフライン音声処理グラフ(OfflineAudioContext
)の基底となるものです。直接BaseAudioContext
を使うことはなく、これを継承するこれら 2 つのインターフェイスを介して使用します。ended
(event)ended
イベントは、再生が終了した際に発火するイベントです。
音源の定義
Web Audio API 内で利用できる音源は以下の通りです。
AudioScheduledSourceNode
AudioScheduledSourceNode
はAudioNode
の一種で、いくつかの音源ノードの親インターフェイスです。OscillatorNode
OscillatorNode
はサイン波を出力するAudioNode
です。出力する波形の周波数を指定できます。AudioBuffer
-
AudioBuffer
はメモリー上に展開された短い音声データを表します。AudioContext.createBuffer()
によって音声ファイルから、もしくはAudioContext.createBuffer()
メソッドによって生データから作成されます。このデータはAudioBufferSourceNode
を利用して再生されます。 AudioBufferSourceNode
AudioBufferSourceNode
はAudioNode
の一種で、メモリー上の音声データを利用した音源です。音声データ自身はAudioBuffer
として保存されています。MediaElementAudioSourceNode
MediaElementAudio
SourceNode
はAudioNode
の一種で、<audio>
要素や<video>
要素を利用する音源です。MediaStreamAudioSourceNode
MediaStreamAudio
SourceNode
はAudioNode
の一種で、マイクや Web カメラといった WebRTCMediaStream
からの入力を扱える音源です。複数の音声トラックがストリーム上にある場合、id
は辞書順(アルファベット順)です。MediaStreamTrackAudioSourceNode
MediaStreamTrackAudioSourceNode
はAudioNode
の一種で、MediaStreamTrack
からの入力を扱える音源です。createMediaStreamTrackSource()
メソッドによって作られたノードの場合、使用するトラックを指定してください。MediaStreamAudioSourceNode
以上の制御を提供します。
オーディオエフェクトフィルターの定義
これらを利用すると、音源からの音声にエフェクトをかけられます。
BiquadFilterNode
BiquadFilterNode
はAudioNode
の一種で、単純な低次フィルターです。フィルターやトーンコントロール、グラフィックイコライザで利用されます。BiquadFilterNode
の入力と出力はともに 1 つです。ConvolverNode
Convolver
Node
はAudioNode
の一種で、Audiobuffer に対して線形畳み込みを行います。リバーブの実現に利用されます。DelayNode
DelayNode
はAudioNode
の一種で、delay-line を表します。入力された音声を、遅らせて出力します。DynamicsCompressorNode
DynamicsCompressorNode
はコンプレッサとして働きます。大きな音の音量を絞ることで、複数の音を同時に再生した時に起きがちな、音のクリッピングや歪みを回避します。GainNode
GainNode
はAudioNode
の一種で、入力された音の音量を指定されたものに変更して出力します。WaveShaperNode
WaveShaperNode
はAudioNode
の一種で、非線形のディストーションエフェクトを実現します。curve 属性に指定された関数を用いて、入力を歪ませます。音を歪ませ、温かみを与えるために用いられます。PeriodicWave
OscillatorNode
の出力の波形を変えるために用いられます。IIRFilterNode
- 一般的な無限インパルス応答(IIR)フィルターの実装です。トーン制御デバイスやグラフィックイコライザーの実装に利用できます。
音声の出力先の定義
処理した音声の出力先を、以下のもので定めます。
AudioDestinationNode
AudioDestinationNode
はコンテキスト内での出力先を表します。通常はスピーカとなっています。MediaStreamAudioDestinationNode
MediaElementAudio
SourceNode
は音声の出力先となるAudioNode
の一種で、WebRTCMediaStream
と 1 つのAudioMediaStreamTrack
から構成されます。Navigator.getUserMedia
で取得された MediaStream と同様に扱えます。
分析と可視化
音声の時間領域 / 周波数領域分析には、AnalyserNode
を利用します。
AnalyserNode
AnalyserNode
を利用すると、音声のリアルタイムに時間領域分析と周波数領域分析が行えます。これを利用すると、音声の可視化が行えます。
オーディオチャンネルの分岐と合成
オーディオチャンネルを分岐したり合成したりするのにこれらのインターフェイスを使います。
ChannelSplitterNode
- The
ChannelSplitterNode
は音源の複数のチャンネルを別々のモノラル出力へ分離します。 ChannelMergerNode
ChannelMergerNode
は異なるモノラルの入力を、1 つの出力へとまとめます。それぞれの入力は、出力内のチャンネルとなります。
立体音響
これらのインターフェイスを使用すると、立体音響のパンニング効果を音源に追加することができます。
AudioListener
AudioListener
インターフェイスは聴者の向きと位置を表します。PannerNode
PannerNode
はAudioNode
の一種で、空間内での音の振る舞いを規定します。位置はカルテシアンの右手座標系で表され、速度ベクトルで動きを表します。向きはコーンの向きで表現します。StereoPannerNode
StereoPannerNode
インターフェイスは単純なステレオプランナーで、音声ストリームのパン(左右バランス)を調整できます。
JavaScript による音声処理
音声Worklet を使うことで、JavaScript や WebAssembly を使って自作のAudioNode
を定義できます。音声Worklet は Worklet
インターフェイスという軽量版 Worker
インターフェイスを実装しています。Chrome 66 以降で既定で有効です。
AudioWorklet
AudioWorklet
インターフェイスはAudioContext
オブジェクトのaudioWorklet
を通して利用することができ、メインスレッドから実行されるオーディオワークレットにモジュールを追加することができます。AudioWorkletNode
AudioWorkletNode
インターフェイスはAudioNode
の一種で、音声グラフに組み込んだり、対応するAudioWorkletProcessor
にメッセージを送信できます。AudioWorkletProcessor
AudioWorkletProcessor
インターフェイスはAudioWorkletGlobalScope
で実行する音声処理コードで、音声の生成・処理・分析を直接行ったり、対応するAudioWorkletNode
にメッセージを送信できます。AudioWorkletGlobalScope
AudioWorkletGlobalScope
インターフェイスはWorkletGlobalScope
から派生するオブジェクトで、音声処理スクリプトが実行されるワーカーコンテキストを表現します。メインスレッド上ではなく、ワークレットスレッド上で JavaScript を使って直接オーディオデータの生成、処理、分析ができるように設計されています。
Obsolete: script processor nodes
音声Worklet が定義されるよりも昔、Web Audio API は JavaScript を使用する音声処理に ScriptProcessorNode
を利用していました。しかしながら処理がメインスレッドで走るためにパフォーマンスが良くありませんでした。歴史的な理由から ScriptProcessorNode
は維持されていますが非推奨であり、将来の規格から取り除かれる予定です。
ScriptProcessorNode
ScriptProcessorNode
を利用すると、JavaScript から音声データの生成、処理、分析を行えます。このノードはAudioNode
の一種で、入力と出力の二つのバッファとリンクしています。入力バッファに新しいデータがセットされる度にAudioProcessingEvent
インターフェイスを実装したイベントが生起します。イベントハンドラは出力バッファにデータをセットして処理を終了します。audioprocess
(event)audioprocess
イベントはScriptProcessorNode
の処理が可能になった際に発火します。AudioProcessingEvent
AudioProcessingEvent
はScriptProcessorNode
の入力バッファが処理可能になったことを表すイベントです。
オフライン / バックグラウンドでの処理
以下のようにすると、バックグラウンドでオーディオグラフを非常に高速に処理/レンダリングし、端末のスピーカーではなく AudioBuffer
にレンダリングすることができます。
OfflineAudioContext
OfflineAudioContext
はAudioContext
の一種で、AudioNode
を組み合わせて、音声処理を行うグラフを表現しています。通常のAudioContext
と異なり、
OfflineAudioContext
は音声を出力せず、バッファ内で高速に処理を行います。complete
(event)complete
イベントはOfflineAudioContext
の処理が終了した時に発火します。OfflineAudioCompletionEvent
OfflineAudioCompletionEvent
はOfflineAudioContext
の処理が終了したことを表します。complete
イベントは、これを実装しています。
廃止されたインターフェイス
以下のものは、Web Audio API の古い仕様には存在しましたが、現在は廃止され、別のものに置き換えられています。
JavaScriptNode
- JavaScript で音声を直接処理できます。廃止され、
ScriptProcessorNode
に置き換えられています。 WaveTableNode
- 定期的な波形変換を行います。廃止され
PeriodicWave
に置き換えられています。
ガイドとチュートリアル
- Basic concepts behind Web Audio API
- Web Audio API は、オーディオコンテキスト内部でのオーディオオペレーションに対するハンドリングを含み、モジュラールーティングを可能とするためにデザインされてきました。基本となる音声操作を成す要素は、オーディオルーチングラフを形作るために、互いに接続されるオーディオノードによります。様々なタイプのチャンネルレイアウトと共に、いくつかの音声源もまた、単一のコンテキスト内部にて支持されています。このモジュラーデザインは、複雑なオーディオ機能を、ダイナミックな音響効果と共に創造するために必要な柔軟性を与えています。
- Visualizations with Web Audio API
- オーディオソースからデータを抽出するには
AudioContext.createAnalyser()
メソッドを使用して作成されたAnalyserNode
が必要です。 例:
- Web Audio API の使用
- 素晴らしい! boombox が出来上がり、「テープ」を再生したり、音量やステレオ位置を調整したりできるようにするために、かなり基本的な音声グラフの作業を行いました。
例
GitHub の webaudio-example に多数の例が掲載されています。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Web Audio API | 草案 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
チュートリアル/ガイド
- Web Audio API の背後にある基本概念
- Web Audio API の使用
- Advanced techniques: creating sound, sequencing, timing, scheduling
- メディアおよびウェブオーディオ API の自動再生ガイド
- Using IIR filters
- Web Audio API による視覚化
- Web audio spatialisation basics
- Controlling multiple parameters with ConstantSourceNode
- Mixing Positional Audio and WebGL
- Developing Game Audio with the Web Audio API
- Porting webkitAudioContext code to standards based AudioContext
ライブラリ
- Tones: a simple library for playing specific tones/notes using the Web Audio API.
- Tone.js: a framework for creating interactive music in the browser.
- howler.js: a JS audio library that defaults to Web Audio API and falls back to HTML5 Audio, as well as providing other useful features.
- Mooog: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.
- XSound: Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... etc
- OpenLang: HTML5 video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file (source on GitHub)
- Pts.js: Simplifies web audio visualization (guide)