audio.js使う時、要注意

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

部分android機種の標準ブラウザにはにaudio.jsがうまく動かないaudio.jsは、みなさんご存知のようにMP3音声ファイルの再生にとても便利なjsプラグインです。

しかし、部分android機種の標準ブラウザにはにaudio.jsがうまく動かない現象があります。

うまく動かないというのは、
①曲再生のシークンは、曲再生後、瞬間終了
②曲再生時間は0のまま
③前進、バックの操作が効かない
のことです。

jsの中身を確認すると、loadProgressファンクションには、下記のif分があります。
      if(this.element.buffered!=null&&this.element.buffered.length){
        if(!this.loadStartedCalled)this.loadStartedCalled=this.loadStarted();
        this.loadedPercent=this.element.buffered.end(this.element.buffered.length-1)/this.duration;
        this.settings.loadProgress.apply(this,[this.loadedPercent])
      }

if分岐に入って、this.loadStarted()が呼ばれると、曲の再生時間this.duration（②）がセットされます。
さらにthis.loadedPercent（①）が正しく計算されます。
さらに前進、バック時（③）、this.loadedPercentを使うので、前進、バック動作は正しく動作します。

androidの部分機種には、this.element.bufferedが取れなくて、if分に入れず、動作がおかしくなります。

あまり強引な解決方法ですが、

if(this.element.buffered!=null&&this.element.buffered.length){
:
}
//追加
else userAgentを判断して、androidかつ標準ブラウザの場合{
 //↑同じ処理
}

但し、androidかつ標準ブラウザの判断は難しい。
最初、/(android)/i.test(navigator.userAgent)&&!(/(chrome)/i.test(navigator.userAgent))
で、androidかつchrome以外で、行けるかなと思っていましたが、
どうも、一部機種には、標準ブラウザでもuserAgentに”chrome”という文字が入っています。

残念ですが、完璧の解決方法が見つかりません。audio.js使う時、注意しましょう。