ブラウザーのネイティブなオーディオ

つい最近まで、ブラウザーの中でどんなタイプのオーディオでも再生できるようにするには、Adobe Flash やその他のブラウザーのプラグインを使う必要があった。Adobe の Flash プレーヤは間違いなく最も普及しているけれども、多くのディベロッパーやデザイナーは、まったくプラグインに依存しない方が良いということに反対する人はいないだろう。

HTML 5 の <audio> を入れる

HTML5 の機能の中で、もっともエキサイティングで待望されていたのは、間違いなく、audio タグだろう。これを使えば、ブラウザーの中で、ネイティブにオーディオを再生することができるようになる。私たちは、Safari 4, Firefox 3.5, Chrome 3 といった、audio 対応のブラウザーでこれを使うことができるが、それ以外のブラウザーに対しては、Flash や他のプラグインでフォールバックすることができる。

今のところ、HTML5 仕様では、audio 要素に対して 5 つの属性が規定されている：

• src – コンテンツのソースを指定する妥当な URL。
• autobuffer – ファイルを前もってバッファするかどうかを指定する論理値。
• autoplay – できる限り早くファイルを再生するべきかどうかを指定する論理値。
• loop – ファイルを繰り返し再生するべきかどうかを指定する論理値。
• controls – ブラウザーのデフォルトのメディア・コントロールを表示するかどうかを指示する論理値。

これらは、ビデオを制御するために使う属性と同じことに注意してほしい。

いくつかの属性を取り上げ、オーディオ・ファイルを再生する簡単な例を作ってみよう：

<audio src="elvis.ogg" controls autobuffer></audio>

（この例は、Firefox 3.5 と Chrome 3 で動作する。しかし、Safari 4 で動作させるためには、ogg ファイルを mp3 に置き換える必要がある。）

仕様策定はまだ終わっていないし、残念なことに、どのコーデックをサポートするかについてコンセンサスがまだ得られていない状態だ。そのため、各ブラウザーがサポートするコーデックはバラバラだ：

もう少し深く入ろう。自分でコントロールを定義するために、他にキーとなるメソッドと属性を使うことができる。仕様では次のようにまとめられている：

• play() – オーディオを再生する。
• pause() – オーディオを一時停止する。
• canPlayType() – 指定の MIME タイプが再生できるかどうかを確定するためにブラウザーに問い合わせる。
• buffered – バッファするファイルの開始と終了の時間を指定する属性。

Opera 10 は <audio> をサポートしていないが、基本的には Audio() を独自でサポートしている。上記のリストでは、現在の所、play() だけサポートしている。

Safari 4, Firefox 3.5, Chrome 3 beta は <audio> も Audio() オブジェクトもサポートしている。Internet Explorer 8 はオーディオに関しては何もサポートしていない。

ソースを使う

ブラウザーに <audio> をサポートさせようとするときに（実際にはどのメディア要素でも同じ）、最初にすべきことは、<source> 要素を使うことだ。これは、ブラウザーに、その最初のオーディオ・ソースをロードするよう、指示する。もしロードが失敗したり、未対応のオーディオだったら、次のオーディオ・ソースに移る。この最初の段階で、私たちは、<audio> がサポートされてなければ、flash を組み込むことができる：

<audio controls autobuffer>
  <source src="elvis.ogg" />
  <source src="elvis.mp3" />
  <!-- now include flash fall back -->
</audio>

しかし、たぶんバグが原因だと思うが、<source> 要素の順番には気をつける必要がある。もし、あなたが、Firefox に最初に MP3 を採用させようとするなら（Firefox はこれに対応していない）、無言のうちに失敗してしまうだろう。そして、その <audio> 要素での継続すべき処理を中断してしまう。Ogg Vorbis を最初に持って来て、それ以外のフォーマットをその次に持ってくるのが確実だ。Webkit（Safari と Chrome）は問題なく処理してくれる。

Opera は、別のまったく困った問題を抱えている。これには、次で説明するように、JavaScript を使って解決する必要がある。

クロス・ブラウザー対応

私たちが jPlayer （jQuery 用のオーディオ・プレーヤ・プラグイン）を作ったとき、今時の Flash ベースのオーディオ・プレーヤにあるいくつかの制限を解決してみようとした。多くは、プレーヤのグラフィカル・インタフェースの実装を Flash に頼っていた。結果的に、他のウェブデザインのプロセスから、そのプレーヤが孤立することになる。

オリジナルの jPlayer は、実際のオーディオ再生を Flash に頼っていたが、ルック & フィールは、HTML や CSS を通してスタイルすることができた。しかし、新しく HTML5 をサポートしたブラウザーがリリースされて、私たちは、Flash 依存を脱却し、サポートされた HTML5 ベースのオーディオを使う気になったのだ。大きな問題は、クロスブラウザー対策だ。ブラウザー間で共通にサポートされるオーディオ・フォーマットがないことが、複雑さを増すことになった。ディベロッパーが HTML5 オーディオをサポートするすべてのブラウザーを最大限に活用したいなら、ストリームしたいオーディオのファイルを、MP3 と OGG の 2 つのバージョン（Opera も入れるなら、WAV も）で用意する必要があるのだ！

私たちの仕事は、さらに困難を極めた。入手できる情報が足りないのだ。いくつかの文書に概略が説明されていたが、せいぜいこんなもんだ：

• Firefox 3.5 – かなり詳細な文書
• Safari 4 – 技術的には完璧だが、説明と例が足りない
• Opera 10 – 短い報告しかない
• Chrome 3 – wiki

HTML5 標準はまだまだ作業中のため、オーディオに関しては、この他にもブラウザーごとに相違があることを、考慮するべきだ。例えば、現時点で無くなってしまったような機能として、オーディオファイルのロード・プロセスを判定する方法がある。Safari 4 はいくつのオーディオ・ファイルがダウンロードされたかを判定することができるのだが、Firefox 3.5 はまだ buffered DOM 属性を実装していないので、それができない。しかし、Firefox 3.5 は、ファイルの "シーク" ができるようだ。これによって、メディアの好きな地点からダウンロードを開始することができるようになる。他のブラウザーでは、例えば、Safari 4 なら、ファイルの最初からダウンロードを行い、ダウンロードが完了した部分の中だけであれば "シーク" ができる（もしくは、"シーク" 対象となる部分がダウンロードされるまで待たされる）。

*しかし、これは、Firefox の文書の中にあるので、もしかしたら、実装予定なのかもしれない。

このような一貫性のなさは致命的な問題とならないまでも、プラグイン・ベースの解決策で効率的に完了するために、私たちは、あらゆる HTML5 オーディオ実装がすべてのブラウザーを通して一貫性を持ち、最新の実装が機能ごとに一致するはずだと信じている。

これは、もし私たちが各ブラウザーのオーディオ能力を活用しようとするなら、私たちはブラウザーごとに違うソリューションを作る必要がある状況に、私たちを置くことになる。もちろん、私たちはブラウザー・スニッフィングを使うことができるだろう。しかし、展望を速やかに変えることを考えて、ブラウザーごとに、どんな能力をサポートしているのか、そして、それに応じて何を適用するのかをチェックするほうが良いと言えるだろう。これをどうやって実現するのかをデモするために、私たちは、即席で HTML 5 オーディオ・チェッカー を作った。

このように、JavaScript を使って、audio タグのサポートをチェックすることができる：

var audioTagSupport = !!(document.createElement('audio').canPlayType);
// 真偽値を返す

audio オブジェクトに対してのチェックは、このようになる：

try {
    // 'src' パラメータは Opera 10 では必須だ。そのため、空文字列 "" を使った。
    // 指定しないと、例外が投げられてしまう。

    myAudioObj = new Audio(""); 

    audioObjSupport = !!(myAudioObj.canPlayType);
    basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);
} catch (e) {
    audioObjSupport = false;
    basicAudioSupport = false;
}

ファイル・タイプの互換性をチェックするために必要なコードは、次のようになるだろう：

// 最初に canPlayType をチェックする必要がある。または、それをサポートしていないブラウザーでは、例外が投げられるだろう。
if (myAudio.canPlayType) {
   // 今のところ、canPlayType(type) は次のいずれかを返す： "", "maybe", "probably"
    canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
    canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
} 

実際には audio オブジェクト/要素の src を変更するには、新たに src を伴った audio 要素かオブジェクトを再生成する必要があることに注意してほしい。

通常、HTML5 オーディオを最大限に活用するソリューションを作るためには、次のことをする必要がある：

1. HTML5 オーディオサポートをチェックし、サポートされていなければ、Flash にフォールバックする。
2. HTML5 オーディオサポートのレベルをチェックし、各ブラウザーに対応したコードを適用する。
3. どんなファイルタイプがサポートされているかをチェックし、適切なファイルフォーマットにリンクする。

事前ロード

良いニュースがある。HTML5 オーディオは標準の中でも比較的未熟な部分ではあるものの、最近の傾向が続いて、ユーザーが Safari と Firefox の最新バージョンにアップグレードするなら、ブラウザーサポートは、まもなく 25% を超えるようだ。これは、オーディオのサポートに、Adobe の Flash や Microsoft の Silverlight などに、もう頼る必要がなくなるブラウザー市場規模で、意義深い。

これに、 Apple の iPod（Safari）、任天堂の Wii（Opera）、Google Android を組み込んだデバイス（Chrome）といったモバイル端末や低スペックのデバイスが、HTML5 オーディオ（現在のところ未サポートの Flash ではなく）の利用を選択するという可能性を加えほしい。そうすれば、あなたは、ネイティブのオーディオのサポートがどれくらい重要になるのかに気付き始めるはずだ。

もっと読む：

• [whatwg] <audio> と <video> のコーデック
• Opera 10 でのオーディオの対応策
• Windows のブラウザーでどれが <audio> に対応しているのか？