再生されない?操作できない?HTML5のaudioタグを使用する時の注意点

再生されない?操作できない?HTML5のaudioタグを使用する時の注意点

HTML5で実装された、簡単に音楽ファイルを再生することが出来るaudioタグについてのメモです。特にカスタマイズをせず普通に使用する分にはいいのですが、デフォルト以外の方法で音楽を再生させたい時の注意点です。

音楽ファイルの拡張子の推奨はMP3

PCであればある程度の拡張子でも再生できますが、スマートフォンやタブレットを考慮すると今のところMP3が一番幅広くカバーしています。最低限でもiPhoneやiPadで再生できるようにします。Androidはいろいろと個性が強いので無視でも良いかと思います。

参考:http://www.x-fit.jp/tips/179

audioタグを使ったコーディング例

audioタグにはいくつかのコーディング方法があります。

sourceタグを省略した場合は

audioタグで使用できる属性

audioタグには、どのように再生するかなどを設定できる属性があります。また、この属性の記述方法も複数あります。

  • preload=”auto” → 再生時まで音楽ファイルを読み込まない。
  • preload=”none” → メタ情報のみ先に読み込む。
  • preload=”metadata” → 音楽ファイルを先に読み読み込む。
  • controls(controls=”controls”) → 再生・停止ボタンやプログレスバー(時間)などのコントロールを表示
  • autoplay(autoplay=”autoplay”) → 自動再生の設定
  • loop(loop=”loop”) → 繰り返し再生の設定
  • muted(muted=”muted”) → ミュートで読み込まれる

属性の設定例

省略した場合

audioタグをスマートフォンで使用する時の注意店

HTML5で音楽ファイルを再生させる時に使用するaudioタグ。PCでは問題なく再生されるのに、スマートフォンやタブレットだと再生されないという時の確認事項です。

1.自動再生(autoplay)は使用できない

PCではautoplay属性でを指定すると、ページを読み込むと自動で設定した音楽ファイルが再生されますが、スマートフォンやタブレットに自動再生の設定はできません。

1.ループ(loop)は使用できない

自動再生(autoplay)同様に、スマートフォンやタブレットには繰り返し再生させる設定のループ(loop)属性は使えません。一応iPhoneでは使えるみたいですがAndroidは微妙らしいです。

コントロールのカスタマイズをする

controls属性で表示される再生・停止ボタンやプログレスバーはブラウザ依存なので、カスタマイズするにはjsを使います。下記のサイトが分かりやすい。

参考サイト:http://zxcvbnmnbvcxz.com/html5-audio-mute-play-skip/
参考サイト:http://dsuket.hatenablog.com/entry/2013/05/05/101430

いいね!のお慈悲を…

この記事が良かったらシェアをお願いしゃっす!

記事の感想はこちら