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

2015年10月02日金曜日 14:48

前編・中編に続いて後編をお届けします。

メディア API のパワーをあらゆる端末で引き出して、メーカーの思惑の斜め上を行きましょう！そうしよう！

開発が止まっていてメンテされない(zyngaのgithubからも消え去ってる)のが残念ですが、かなり強力なライブラリです。
ダウンロードは作者のgithubリポジトリからできます。
Zynga Jukeboxは機能的にかなりスマホ向けになっていて、オーディオスプライトの再生に特化しています。

オーディオスプライトライブラリとしては珍しく Flash によるフォールバックを用意しています。

このために最も多くのブラウザのサポートを謳っています。

Jukebox.js のコード中に次のコメントを見つけました。

てっきり Android2.x 以降かと思いましたが、1.6 用の Flash Player ってリリースされたのでしょうか？

/*
 * Flash Audio Support
 * Hint: All Android devices support Flash, even Android 1.6 ones
 */

Android1.6 用 Flash Player を必死で探してしまいましたよ、勘弁してください…

ついでに触れますと 1.6 用サードパーティー製ブラウザでは唯一 Opera12 が提供されています。そしてモバイル Opera12 は HTMLAudio をサポートしている、とされています。

しかし Audio.src に url を指定したタイミングで Opera が問答無用でクラッシュします。HTMLAudioElement が存在しても Android1.6 以下の Opera に対しては new Audio(url) してはいけません。

そうそう new Audio('') ではクラッシュしないので canPlayType() できちゃいます、要注意です。

HTML5 に対応する初のモバイル用 IE です。そのメディアAPIの実装具合はごれほどのものでしょう？

iOS 等と同じくタッチイベント内で play() する
ロードがかなり進行しても duration が NaN のまま、play() してしばらくすると正しい duration が取れる
currentTime がしばらく 0 のままで、duration が取れてから更新可能になる（みたい）
currentTime が更新されないままでも timeupdate が発火する、つまり waiting や seeking イベントが出ない、直前の currentTime と比較して waiting や seeking イベントを補う
loadeddata, canplaythrough がない
currentTime が数値として扱えていない？ +0 したら正しく動いた

HTML5 対応を謳いつつも見えにくいところで個性が炸裂しています。独自路線のマイクロソフトはまだまだ健在でした。

本当にありがとうございまいた。

PC 向けブラウザは概ね共通のコードで動きますが、中には不可解な挙動をするものもありました。

残念なモバイルブラウザも含めこれらの多くは正常に機能するようにパッチが可能なことも分かりました。

またはメディアファイルを工夫すること、音声の最後に無音を追加する、mp3 VBR でなく mp3 CBR にする、などで正常に動作するものもありました。

モバイルの世界では OS の更新は早々に止まってしまいます。

続いてアプリもインストールが難しくなると端末は魅力を大きく損なってしまいます。

しかし、最新ブラウザが提供されなくなって以降も Web 開発者の努力によって端末が活躍し続けることが可能なのです。

とっとこ新しい端末を売りつけたいメーカーの斜め上をいって、Web 技術者の矜持を見せつけましょう。enjoy!

音声単体では意図した動作をするのですが、アプリケーション内で画面描画と組み合わさると、音声が止まる、、、

そうでなくとも記事を書き出したときには知らなかった差異とパッチ法が、ここ2日でガッツリやったところアレヨアレヨと出てきまして…

そこで発見した情報は全て盛り込めていませんが、一旦記事を放流します。

今現に困っている方は、pettanR のソースをご確認ください。または僕の twitter まで、ではでは。

2015年10月03日土曜日 13:06, 編集