Web Audio APIとは?

Web Audio APIで可能なこと

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

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

Web Audio APIの機能

図a. Web Audio APIの機能

百聞は一見に如かず…ということで, さっそく, Web Audio APIを利用して作成されたWebアプリケーションを使ってみましょう. 表aに, リンクを記載したのでアクセスしてみてください.

Windows環境ではChrome, Mac OS X環境ではSafariもしくはChromeをご利用ください.

表a. Web Audio APIを利用したWebアプリケーション
AuthorName / Link
GoogleJAM with Chrome
g200kgWebModular
aikeWebSynth
Kawai RyoyaWeb Audio FM Synth
音楽方丈記簡易ドラムマシン
This website's authorX Sound

いかがでしたか? ブラウザだけで, こういったアプリケーションを作成できる時代になっています. 自分もこんなアプリを作成してみたいと思われた方に, このサイトが少しでもお役に立てればと思います.

HTML5登場の経緯

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

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

そのような流れのなかで, Web Audio APIも誕生しました.

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

図b. HTML5 ロゴとバッジ

HTML5 関連テクノロジーのカテゴリ

図c. HTML5 関連テクノロジーのカテゴリ

表b. HTML5 関連テクノロジーのカテゴリと概要
CategoryDescription
Connectivity / RealtimeWebSocket, Server-Sent Events etc
CSS3 / StylingCSS3, Web Fonts etc
Device Access位置情報, 加速度センサ etc
Graphics, 3D & EffectsSVG, Canvas, WebGL etc
MultimediaAudio, Video etc
Performance & IntegrationWeb Workers, XMLHttpRequest Level 2 etc
Semanticsmicrodata, microformats, アウトライン要素 etc
Offline & StorageApplicationCache, Web Storage, Indexed Database etc

HTMLMediaElementとの違い

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

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

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

HTMLMediaElementのターゲットは, オーディオデータの再生です (Data URLを利用することで, サウンド生成することも可能ですが… jsfx.jsはこの方法でサウンド生成しています) .

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

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

HTMLMediaElementとWeb Audio API

図d. HTMLMediaElementとWeb Audio API

Audio Data API

Web Audio APIレベルの高機能なサウンド処理が可能なAPIとして, Audio Data APIもあります. このAPIは, HTMLAudioElement (audioタグ) の拡張として位置づけられています. Web Audio APIと仕様は大きく異なりますが, Audio Data APIでもWeb Audio APIと同じようなことができます.

Firefoxで先行実装されていましたが, (残念ながら?) 将来的にはWeb Audio APIに統一されるみたいなので, Audio Data APIは消えゆく運命にあります (FirefoxもWeb Audio APIのサポートを進めています) .

したがって, 学習効率の観点からWeb Audio APIの習得が優先的と言えるでしょう. (ちなみに, Audio Data APIの仕様はこちらで公開されています) .

Web Audio APIを利用するには?

ブラウザ

Web Audio APIを利用するためには, Web Audio APIの実行環境が必要です. その実行環境となるのが, ブラウザ (に実装されているJavaScriptのエンジン) です.

しかし, どのブラウザでもOKというわけではありません. 現状, Web Audio APIを最も安定してサポートしているブラウザは, ChromeとSafari, Operaです.

ChromeはLinuxでもインストール可能ですが, ディストリビューションによっては, 上手く動作しません. Safariは, Mac OS XやiOSを利用している場合になります. 表dに安定して利用できる環境を記載します.

表d. Web Audio APIのサポート状況 (2014. 12現在)
OSBrowser
WindowsChrome, Opera (, Firefox)
Mac OS XChrome, Safari, Opera
iOSSafari, Chrome, Opera
Linux (Ubuntu)Chrome

JavaScript

実行環境となるブラウザを用意したら, あとは実現したい処理をプログラミング言語で記述する必要があります. プログラミング言語選択の余地はなく, JavaScriptのみの一択です (これは, Web Audio APIだけでなく, 他のHTML5 APIでも同じです) .

JavaScriptの特徴としては,

  • インタプリタ方式
  • 手続き型言語
  • 構造化プログラミング
  • プロトタイプベースのオブジェクト指向 (Javaなどのクラスベースとは異なる)
  • 無名関数やクロージャ (高階関数) など関数型プログラミングの性質

さらに, クライアントサイドJavaScriptにおいては,

  • DOMの操作
  • イベントドリブンプログラミング

といったことが重要になります.

JavaScriptに関してほとんど理解がない…という場合は, 上記のキーワードを中心に習得を進めてみてください. といっても, 言語仕様をきちんと理解しなければ, Web Audio APIが利用できないわけではないので, ザクっとでOKです.

Web Audio APIを利用するためには, JavaScriptによるプログラミングが必須です. しかし, このサイトの目的は, JavaScriptの言語仕様を解説することではないので, 必要に応じて他のリソースも参考にしてください.

ただ, コードを中心に解説していきますし, 動作確認をするデモも用意しています. したがって, コピー&ペーストやブラウザのディベロッパーツールなど活用しながら進めることで, それなりのアプリケーションを作成することは可能ですし, 何となく理解できると思います. JavaScript???と重荷に感じてしまう方でも, とりあえずこのサイトが少しでも役立ち, JavaScriptを習得するきっかけになればと思います.

まずは, 理屈よりも「作って・試して・楽しい」が最も大事だと思います. 隣りにお菓子やジュースでも用意して (XP : eXtream Programming), 気楽に進めてみてください.

その他

以下の2点に関する知識はあればベターかなと思われることです.

音信号処理 (ディジタル信号処理)

音信号処理の知識がなくても, Web Audio APIのアプリケーションを作成することは可能です. なぜなら, Web Audio APIが定義するノード (オブジェクト) によって, 音信号処理のほとんどが内部に隠蔽 (抽象化・ブラックボックス化) されているからです. とは言っても, 音信号処理の知識があるほうが, Web Audio APIの仕様の理解や開発も進みやすいと思います. また, ScriptProcessorNodeをサウンド処理のコアにする場合には必須です.

音楽理論

音楽理論は作成するアプリケーションによりけりと言えるでしょう. 例えば, コード (和音) やスケール (音階) をアプリケーションで扱う場合には必要となるでしょう. あるいは, MML (Music Macro Language) を記述して,プログラムに自動演奏させるようなケースでも, 五線譜の基本的な理解は必要となるでしょう.

Web Audio APIを利用するには?

図e. Web Audio APiを利用するには?

サイトの概要

サイトの目的

サイトの目的はWeb Audio APIについて解説することですが, W3Cが公開している仕様のすべてを解説するわけではありません. さらに, Web Audio APIの仕様自体が更新されています.

JavaScriptの言語仕様の解説がサイトの目的ではないこともご了承ください.

結論として, このサイトはW3Cが公開している仕様にとって代わるものではなく, Web Audio APIの仕様の理解を補助するリファレンスサイトと位置づけてください. ちなみに, Web Audio APIの仕様はこちらです.

仕様とブラウザの実装に差異があり, 仕様では定義されているのに動作しない…ということもあります. その場合には, 開発者ツールを活用して, 実装されているプロパティやメソッドを確認してみてください.

そして, (申し訳ありませんが) 制作者自身も完璧に理解しているわけではないので, 間違いもあるかと思います. その場合には, お手数ですがコメントをいただければと思います. 制作者自身もこのサイトの作成・更新を通じてWeb Audio APIの理解を高めていければと考えています.

閲覧可能なブラウザは表eのとおりですが, デモの実行などを考えると, Web Audio APIを最も安定してサポートしているChrome (Mac OS X / Windows / Linux / iOS), Safari (Mac OS X / iOS) を推奨します.

表e. サイト閲覧可能なブラウザ
Chrome Safari Opera Firefox IE 9 - 11
Chrome Safari Opera Firefox Internet Explorer

サイトの構成

このサイトの構成は以下のようになっています.

  1. 1. Web Audio APIの基本処理
  2. 2. エフェクター
  3. 3. サウンドの視覚化
  4. 4. デバイス API
  5. 5. リファレンス (API検索・関連リンク)

1. Web Audio APIの基本処理を理解できれば, あとは作成したいアプリケーションに応じて, 2. エフェクターや, 3. サウンドの視覚化, 4. デバイス APIに進んでください.