HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / HTML5（目的別） / <audio>

HTML5  <audio>

<audio>タグは、音声を再生する際に使用します。 再生する音声ファイルは、src属性で指定します。

<audio>～</audio>の中には、 <audio>タグがサポートされていない環境で表示させるメッセージを記述することができます。

動画の再生については、<video>タグのページを参照してください。

■HTML4.01からHTML5へのバージョンアップによる変更点

audio要素は、HTML5から新たに追加された要素です。

■属性

src属性
　　　音声ファイルを指定する
preload属性
　　　音声をあらかじめ読み込む（auto、metadata、none）
autoplay属性
　　　音声を自動再生する
loop属性
　　　ループ再生を指定する
c ontrols属性 
　　　インターフェースを表示する

以下のサンプルでは、FirefoxとGoogle Chromeで音声を再生できます。

■使用例

HTMLソース
<figure>
  <figcaption>T-Rex の声を聴こう:</figcaption>
  <audio controls src="https://2716eb0d-7ba4-44fa-8da1-ca4c4ee18223.mdnplay.dev/shared-assets/audio/t-rex-roar.mp3"></audio><br>
  <a href="/shared-assets/audio/t-rex-roar.mp3"> Download audio </a>
</figure>​
</body>

↓​↓↓↓

T-Rex の声を聴こう:

Download audio

※メモ： サーバー側の設定にもよるでしょうが、 ogv形式の動画やogg形式の音声を再生するには、 .htaccess に以下の記述を追加する必要があるかもしれません。

AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv