はじめに

ネイティブなアプリでは当たり前に使われている、"音"によるフィードバック。HTML5には、WebアプリやWebサイトでも同様にリッチな表現を実現できる音に関する仕様がいくつかあります。

このシリーズでは、BGMや効果音を再生するといった基本的なものから、シンセサイザーのようなWebアプリや音響合成といった複雑なものまで、ブラウザで音を扱うにはどういった方法があるかについて紹介していきます。

音に関する要素・API

まず始めに、ブラウザで利用できる音に関する主な要素・APIを紹介します。

1. Audio Element
2. Video Element
3. Object Element / Embed Element
4. Web Audio API
5. Web MIDI API
6. MediaStream API

今後このシリーズでは、もっとも簡単に音を扱える「1. Audio Element」と、JavaScriptを使うことでより高度な音響処理が可能な「4. Web Audio API」にフォーカスして解説していきます。

ただ、音を扱う手段が他にもあることや、組み合わせて使うことのできる手段があることを知っておくと、より理解が深まると思います。まずはこれら全般について、解説しましょう。

1. Audio Element

「ブラウザで音を扱う」と聞いて、最初に思い浮かぶのがこのaudio要素ではないでしょうか。

<audio src="./path/to/your/audio.mp3" autoplay></audio>

この例は、audio要素のsrc属性に音源へのファイルパスを指定し、autoplay属性を設定しているだけです。たったこれだけの記述で、ページが読み込まれ音源のロードが終わり次第、音源が自動再生されます。

ブラウザがこの要素に対応さえしていれば、別途プラグインなどは必要とせず、音源を用意するだけでこんなにも簡単に利用できます。

その他に指定できる属性やJavaScriptからの扱い方など、このaudio要素についての詳しい内容は、次回以降取り上げていきます。

2. Video Element

video要素でも、audio要素と同じように音を扱うことができます。

<video src="./path/to/your/audio.mp3" autoplay width="0" height="0"></video>

指定できる属性もaudio要素とほぼ同じですが、他にもビデオならではの映像に関する属性がいくつかあります。

video要素とaudio要素の違いは、video要素が映像の表示領域を持つのに対し、audio要素にはそれがないという点のみです。

3. Object Element / Embed Element

これは少し毛色が違うかもしれませんが、音を扱うための方法として一応紹介しておきます。

<!-- embed -->
<embed src="./path/to/your/audio.swf">

<!-- object -->
<object data="./path/to/your/audio.swf"></object>

このようにFlashコンテンツなどを埋め込むことでも、音を出すことは可能です。むしろこれまでは、Webで音を出すにはFlashでコンテンツを制作する必要があるといっても過言ではありませんでした。他にも、Microsoft Silverlightで再生できる.xapファイルなどを埋め込むこともありました。

ただしこれらの方法には以下の制限があります。

• ブラウザ側にプラグイン（例: .swfなら「Adobe Flash Player」）のインストールを必要とする
• iOSではプラグインがインストールできないため、実質利用不可能
• ブラウザの互換性やプラグインのインストール状況まで考慮すると、どうしてもHTMLの記述が複雑になる
• 各ブラウザベンダーが、次期リリースで続々とこれらのプラグインを初期状態で非サポートとすることを発表している

以上から、この先のことを考えると、あまりおすすめできる選択肢ではないと筆者は考えます。

4. Web Audio API

Web Audio APIは、上述したAudio Element（HTML Audio）よりもさらに踏み込んだ、ブラウザ上で音を扱うためのAPIです。

「踏み込んだ」というのは、audio要素のように単純に音を再生することに留まらず、ミキシングやフィルタリングなどDAWのような機能を実装することも可能だからです。ゲームのステージの状況に応じてエフェクトを反映したり、複数の効果音を同時に再生したりなど、さまざまな要件に対応できます。

単純にBGMを流し続けたい、ボタンのクリックに合わせてSEを流したいなど、audio要素でまかなえる要件以上のものがある場合には、このWeb Audio APIの使用を検討するとよいでしょう。

pただ、できることが増えた分使い方も複雑になっており、最初は少々とっつきにくいかもしれません。このAPIについても、このシリーズで追ってフォーカスしていく予定です。

5. Web MIDI API

Web MIDI APIは、MIDI（Musical Instrument Digital Interface）プロトコルをブラウザでサポートするためのAPIです。

これは直接音を扱うためのAPIではありませんが、たとえばMIDIデバイス（キーボードやドラムマシンなど）をパソコンに接続し、ブラウザを楽器にすることができるなど、前述した「4. Web Audio API」と親和性が高いAPIです。

6. MediaStream API

この名称はあまり馴染みがないかもしれません。これはWebRTCという規格で定義されているAPIの一つで、パソコンのカメラやマイクから映像や音声ストリームを取得できるAPIです。

取得した音声はもちろんJavaScriptから扱うことができ、video要素に接続することでビデオチャットを簡単に実装できます。マイクから音を拾って、その声を加工する変声機を実装することも、上記の「5. Web Audio API」を使うことで可能になります。

音を扱う上で知っておくべきこと

最後に、Webサイト・またはWebアプリケーションで音を扱う上で、開発者が知っておくべきことをいくつか取り上げます。

利用環境への配慮

昨今、動画コンテンツを含むWebサイトは増えてきたように思いますが、それでもまだ音が出るWebサイトは一般的ではありません。

突然BGMの再生がはじまったり、電車内など思いもよらない場所で効果音が再生されたりすると、場合によってはユーザーを驚かせることがあるかもしれません。

• 最初に音が出る旨の表示をする
• ユーザーの許可を得てから音を出すようにする
• 目立つところに音量調整・ミュートの機能を用意する
• 音がなくても伝えたい内容を表現できるようにしておく

このような、ユーザーの利用環境への配慮は忘れないようにしてください。

音源の取り扱い

audio要素などで手軽に音を扱えるようになったからといって、img要素などと同じよう多用するには注意が必要です。

概して音源は画像よりファイル容量も大きくなるため、取り扱いには注意が必要です。

• 画像と同じく、ファイル容量に気を付ける
• 数が多い場合はスプライト化（複数ファイルを1ファイルにまとめる）を検討する
• 要件に応じてサンプル数やビットレートを落とす
• まとめてダウンロードせず、遅延ロードや音源のロード状態を管理する機構を用いる

あまりにも大きな音源、または多数の音源を扱おうとすると、パソコンのスペックによっては、音源のダウンロード・デコードの処理でメモリを専有してしまいます。すると、他の処理が遅延したり、最悪の場合ブラウザのフリーズや強制終了を引き起こす可能性もあることも留意しておきましょう。

ファイルフォーマットとその対応

残念ながら、単一のフォーマットをすべてのブラウザで再生することができるわけではありません（例: OggフォーマットはInternet Explorerでサポートされていません）。それぞれのブラウザ用に、再生できるフォーマットをそれぞれ用意する必要があります。

代表的な音声メディアフォーマットとブラウザのサポート状況

原稿執筆時点で入手できる最新版にて確認しています。ブラウザのバージョンによっては対応していない場合もあると思いますので、あくまで参考程度にしてください。

まとめ

今回はブラウザで利用できる音に関する要素・APIを紹介してきました。次回からは、Audio Element（HTML Audio）について詳しく紹介していきます。