HTML5のaudioタグが再生されない?操作できない?そんな時の対処法

HTML5のaudioタグが再生されない?操作できない?そんな時の対処法

HTML5で実装された、簡単に音楽ファイルを再生することが出来るaudioタグについてのメモです。

特にカスタマイズをせず普通に使用する分にはいいのですが、デフォルト以外の方法で音楽を再生させたい時の注意点です。

スポンサーリンク

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

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

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

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

<audio>
<source src="sample.mp3" />
<source src="sample.wav" />
<p>オーディオ機能未対応です</p>
</audio>

sourceタグを省略した場合は

<audio src="sample.mp3"></audio>

audioタグで使用できる属性

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

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

属性の設定例

<audio preload="auto" controls="controls" autoplay="autoplay" loop="loop">
<source src="sample.mp3" />
<source src="sample.wav" />
<p>オーディオ機能未対応です</p>
</audio>

省略した場合

<audio preload="auto" controls autoplay loop>
<source src="sample.mp3" />
<source src="sample.wav" />
<p>オーディオ機能未対応です</p>
</audio>

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

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

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

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

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

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

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

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

Web
スポンサーリンク
この記事を書いた人
管理人

10-PLATEの管理人。ゲームとアニメが趣味の30代おっさん。テレビや芸能情報といったトレンドをまとめることを生業としている底辺中の底辺なので温かい目で見てやって下さい。

管理人をフォローする
スポンサーリンク

記事のコメント