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

スポンサーリンク
HTML5のaudioタグが再生されない?操作できない?そんな時の対処法 Web関連

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

コメント

タイトルとURLをコピーしました