大探検！HTML5オーディオスプライト・前編

HTML5 へのドリームを打ち砕くモバイルブラウザ Audio のめくるめく制限

かつては flash 等のプラグインに頼っていたオーディオ機能を、Web ブラウザ自体が備えるようになりました。

しかし iOS や Android 用のモバイルブラウザは Audio や Video 機能に制限が多く、デスクトップ版ブラウザで動いたからといって予断を許しません。

有名な制限として、iOS4.0(2010年6月21日, iPhone 3G以降, iPod touch 第二世代以降, iPadは初代から)からモバイル Safari が Audio をサポートします。 しかし、ユーザーによるタッチイベント内で load() しないと音声ファイルをダウンロードできない、という制限があります。

一方の Android は 2.3(2010年12月16日)以降でデフォルトブラウザが Audio に対応します。 この時点では iOS のような制限はありませんが、Android4 の途中から iOS と同じく同時再生数が一音になりユーザーによるタッチも必要になります。

オーディオスプライトの登場

これら Audio 制限をうまくなだめてブラウザゲーム等で利用していくためにオーディオスプライトというテクニックが登場します。

さらにオーディオスプライトライブラリがいくつか登場し、そもそもオーディオイベントのタイミングが大きく異なる、などの悩ましい問題をまるっとひっくるめて解決してくれまず。（ときどきし損なっています…）

お仕事でオーディオ機能を使用するにあたって、それらライブラリや記事を拝見しつつ手元の端末で調査を行いました。

結構な分量になってしまいますので、何回かに分けて調査結果をご紹介していきます。

本記事ではリンク先で言及されていない点や現在の状況について補足しますので、リンク先を参照しつつご笑覧ください。

UnitePlayer.js 2011.12.12～

UnitePlayer は、モバイルブラウザ上で動作するゲームに音をもたらします。

扱いが難しい Mobile Safari や Android ブラウザの音周りをフォーマット化し、とっても扱いやすくします。

uupaa 氏制作のオーディオスプライトライブラリです。

UnitePlayer.js 作ったよ

よくまとまった良記事ですのでまず目を通しておきましょう。uupaa 氏の記事は全般に渡って調査量が半端なく読み応えがあります。他の記事にもどんどん目を通しましょう。例えば WebAudio に関する次のページなどはオーディオに触るにあたってぜひ読んでおきたいところです。

uupaa / Audio.WebAudio.Browser.Compat.md

UnitePlayer.js のライセンス表記がブログ記事中にはなかったので戸惑いましたが、Google Code の uupaa-js-spinoff に従うなら MIT License になりそうです。

2011年の記事のため、現状と異なる点に注意が必要です。僕の調査で判明した情報を補っていきますと…

Android2.x ～ 4.? デフォルトブラウザは再生時間を補正

Android は再生時間が短い(0.1～0.5秒)と再生されたりされなかったりと不安定になるため、内部で再生時間を延長する等の補正を行なっています

Android ブラウザについて、短い音声の再生には、再生時間を少しだけ長く指定する必要があります。

コードを拝見すると、Android に対しては 0.2 秒を、さらに一秒未満の音声に対しては 0.4 秒を追加しています。手元の Android 2.3.5 端末でもこの処理は適当で音が途切れる問題が解消されました。

x = /Android/.test(n) ? parseFloat(n.split("Android")[1]) || 2.3 : 0,

x && (g && (g += 0.2), 1 > g - e && (g += 0.4));

記事の時点では、Android4.x が登場していませんが、僕の調査ではこの補正は Android4.1.1(ドスパラパッド, Webkit 534.3) に対しては必要で、Android4.4.4(Nexus7, Y! Browser, Webkit 537.36) では不要でした。Webkit バージョン 534.3 ～ 537.36 のどこかでメディア周りの挙動が大きく変わったようです。

Android 上で動作する Mobile Firefox の再生でノイズ

ogg は再生できますが mp3 は再生できません

ogg の再生でノイズが乗り正常に再生不能です

Mobile Firefox のバージョンが示されていませんが、記事の日付を元に version 8.0(リリース2011年11月8日)ではないかと思われます。僕の手元の Android2.3.5 + Firefox31 では正常に動作します。

Fennec はいつから正常化したの？

どのバージョンでオーディオ機能が正常化したのか？特定したうえで Flash に切り替えたり No Audio にしたいところです。そのためにこの間の Audio 関連のアップデートを見ていきますと、次の更新が見つかりました。

HTML5 Native support for the Opus audio codec added

HTML5 Various <audio> and <video> improvements

HTML5 video playbackRate and Ogg chaining support landed in Firefox

また Firefox は 25 以降でボリュームの調整が可能になったそうです。

Android 上で動作する Opera Mobile でロジックが組めない

audio.addEventListener でイベントハンドラがコールバックされません

コールバックされないため、まともにロジックが組めません。再生するぐらいしかできません

Opera Mobile のバージョンが示されていませんが、記事の日付を元に Opera Mobile 11 ではないかと推察されます。

僕が調査した Opera Mobile 12 ではイベントハンドラがコールバックされます。

しかし currentTime と duration に奇怪な個性的な挙動があり、併せて再生できる音声ファイル形式にも大きな制限がありました。(症状と解決法は次回に譲ります。)

つづく…

結構な分量になってしまったので前編はここまで、中編に続きます。