フロントエンド開発Blog

オレには鈍器がある

HTML5AUDIO , WEBAUDIO , boombox , howler , soundjs

Xperia Z1, Z2だとブラゲーとかでサウンドがまるで再生されない、なんてことありませんか?私は割りと遭遇します。

なぜだろうとぐぐってみても同じ症状を訴える人も少なければ、それについて対処している技術者も見当たらない。

ということでガッツリ調べてみました。

何はなくとも調査ツールがないと。ということでさくっと作ってみました。

国産のブラゲで良く使われているboombox.js、海外のサイトでよく見かけるhowler.js、国内外で見かけるけど評判がいまいちなSound.jsの3つでベンチマークとりました。

オーディオ形式はAndroid全般で再生可能なoggとiosで再生可能なaacの2種をベースに、念のためmp3も用意しました。基本、oggとaacで事足りるみたいですがmp3なら鳴る、というケースも考えられるので用意しました。

ライブラリに処理を委譲する前に、canPlayTypeでoggとaacで再生可能なファイルタイプを調べます。(前述の通り、Androidならほぼ間違いなくoggになります)そして決定したファイルタイプにマッチした音声ファイルをpreloadし、ライブラリに音声ファイルを登録して再生待ちの状態にします。ただしse2だけは強制的にmp3を使うようにしてあります。

canPlayTypeでのオーディオファイル形式振り分け処理


  var _au = new Audio;
  var _ogg = _au.canPlayType("audio/ogg");
  var _aac = _au.canPlayType("audio/aac");
  var _mp4 = _au.canPlayType("audio/mp4");
  var playType = "";
  var canPlayType = "";
  if (_ogg) {
      playType = "audio/ogg";
      canPlayType = "ogg";
  } else if (_aac) {
      playType = "audio/aac";
      canPlayType = "aac";
  } else if (_mp4) {
      playType = "audio/mp4";
      canPlayType = "aac";
  }

よくある感じですね。ここらへんの振り分けに関してはTM Life - HTML5 Audio を JavaScript で使う方法を参考にしてみました。

手元の端末とか借りた端末で色々みてみました。

  • ios全般はboombox,howlerではいずれも再生可能、SoundJSはmp3タイプのみ再生可能
  • Android2.3はboombox,howlerではいずれも再生可能、SoundJSはまるでだめだった
  • XperiaZ1, Z2以外のAndroid4.x~はboombox,howlerではいずれも再生可能、SoundJSはmp3タイプのみ再生不可

boomboxとhowlerは実力ともに互角ですね。さすが国内外の有力候補ライブラリ。SoundJSェ・・・

DeviceInfoではWebAudioが再生可能になってました、が、再生されず。うんともすんともいいません。boomboxやhowlerのonEndコールバックは正常に作動するため「あたかも鳴っている」かのような挙動。

Android SDKのlogcatで監視してもエラーは検出できません。

だめもとでHTML5AUDIO強制モードでboomboxを使ったら。。。鳴りました。完璧なほどに。

AudioContextは有効だけど実際は再生できない、という端末側の仕様か何かでしょうか。

腑に落ちませんがとにかくWEBAUDIOを使わずに再生すればいけました。まぁ機種依存といわれればそれまでですが、意外とはまってる人はいるんじゃないでしょうか。だめもとでHTML5AUDIOモードで再生してみてはいかがでしょうか。

ページトップへ

関連ページ

ページトップへ