audioを使ってみる

2015.05.03

audioタグの使い方と使うときの注意点をメモ。

対応ブラウザ

audioが対応しているブラウザはこちら。
IE8以下は非対応で、スマホは概ね対応しているようです。
ただし、スマホの場合はブラウザ毎の差異や機能の制限が多いので、対応する場合は注意が必要です。

<audio  src="audio.mp3" controls>
<p>audioタグをサポートしているブラウザで閲覧ください。</p>
</audio>

複数の再生候補を用意したい場合、sourceタグで指定もできます。

<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.wav" type="audio/wav">
<p>audioタグをサポートしているブラウザで閲覧ください。</p>
</audio>

ただ、以前はブラウザ毎で対応している拡張子が異なっていたので、どのブラウザでも再生できるように複数指定する必要がありましたが、現在はmp3だけでも問題なさそうです。
(PCの主要なブラウザのみで、スマホは未確認。)
audioを使ってみるデモページ
　

audioには自動再生やループ再生などの属性を使用することができます。

<audio src="audio.mp3" preload="metadata" autoplay controls loop muted>
<p>audioタグをサポートしているブラウザで閲覧ください。</p>
</audio>

autoplay	読み込み後、自動再生する。
controls	インターフェースを表示する。ブラウザによって見た目が異なるので注意。
loop	ループ再生する。
muted	ミュートにする。
preload	音声をあらかじめ読み込むかどうか設定する。 preload=”auto”:音声を読み込む。 preload=”metadata”:メタ情報のみ読み込む。 preload=”none”:読み込まない。

【参考サイト】