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を使います。下記のサイトが分かりやすい。