WEB SOUNDER

Web Audio API 解説

Web Audio API とは?

Web Audio API で可能なこと

ブラウザのみで高機能なサウンド処理を実現する

これが, Web Audio API で可能になることの要約です. Web Audio API によって, プラグイン (ブラウザ拡張機能) がなくても, ブラウザで動作する楽器アプリケーションやシーケンサー, ゲームの効果音などが作成可能になります.

Web Audio API 実装の経緯

HTML5 登場以前においては, ブラウザ上でのサウンドの生成や再生は, 主に Flash などのプラグインの役割でした. これは, Web Audio API だけでなく, 多くの HTML5 API に共通して言えることでしょう. Webアプリケーションのある特定の分野…すなわち, アニメーション, オーディオやムービーの再生, ソケット通信, データの永続化…
などは, ブラウザそのものの機能として提供せずに, プラグインで補うという状況が続きました. つまり, これらの機能はブラウザの拡張機能という位置づけでした.

しかしながら, このような状況を良しとしないブラウザベンダーが協力して, プラグインに頼らずにブラウザ自体で, これらの機能を有するWebアプリケーションの実行環境を提供するという動きがおきました. これがHTML5, 特にHTML5 API登場の経緯です.

そのような流れのなかで, Web Audio API も仕様策定され, Chrome, Safari が先行実装し, Microsoft Edge の登場とともに, モダンブラウザのすべてが Web Audio API を実装するという状況にまでなりました.

HTMLMediaElement との違い

JavaScript API で, サウンド関連の API は Web Audio API だけではありません. HTMLMediaElement, いわゆる, audio タグやvideo タグがその代表例です. サウンドを扱うというマクロな視点で見ると, HTMLMediaElement も Web Audio API も同じカテゴリーに属する API と言えます.

しかし, ミクロな視点は異なります. 一般的に, サウンドをアプリケーションで扱うと言った場合, 主に, 以下の 3 種類のケースが考えられます.

サウンドをアプリケーションで扱うケース
CaseExample
オーディオデータの再生iTunes
サウンドの生成ソフトシンセサイザー
オーディオデータの加工・編集GarageBand

HTMLMediaElement のターゲットは, オーディオデータの再生です.

Web Audio API のターゲットは, サウンド生成したり, オーディオデータを加工・編集したりすることです.

アプリケーションによってこの 2 つの API を使い分けます. 単純に, オーディオデータを再生するだけの場合は, HTMLMediaElement のほうが実装が簡単で使い勝手も良いです. 一方で, サウンド生成したり, オーディオデータを加工・編集したりする場合には, Web Audio API を利用するほうが, 高度な処理をできるだけ簡単に実装できます.