audioを使ってみる

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

対応ブラウザ

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

how-to-use-audio01
 

サンプルコード

HTML

<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には自動再生やループ再生などの属性を使用することができます。

HTML

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

audioを使ってみるデモページ2
 

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

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31