HTML & CSS - audio タグ

自動再生

audio タグに autoplay 属性を含めることで、ページを開いたときに再生ボタンを押さなくても自動で再生されます。

<audio controls autoplay src="/media/music.mp3"></audio>

ループ再生

audio タグに loop 属性を含めることで、リピート再生が有効になります。

<audio controls loop src="/media/music.mp3"></audio>

ミュート

audio タグに muted 属性を含めることで、ページを開いたときにミュート（消音）状態になります。

<audio controls muted src="/media/music.mp3"></audio>

事前読み込み

audio タグに preload 属性を指定することで、事前に音楽コンテンツを読み込むかどうかをブラウザに指示できます。preload 属性に指定できる属性値は、以下の通りです。

preload="none"

音楽コンテンツの事前読み込みは行いません。

preload="auto"

音楽コンテンツ全体を事前に読み込みます。（デフォルト値）

preload="metadata"

音楽コンテンツのメタデータ（例えば曲の長さなど）だけを事前に読み込みます。

<audio controls preload="metadata" src="/media/music.mp3"></audio>

音楽データの複数指定

audio タグ内に source タグを指定することで、複数のデータ形式を指定することができます。source タグによって複数のコンテンツを指定した場合、ブラウザは対応している最初の形式を使用します。

<audio controls>
    <source src="/media/music.mp3" type="audio/mpeg">
    <source src="/media/music.ogg" type="audio/ogg">
</audio>

ただし、主要なブラウザでは mp3 のデータ形式を再生できるため、source タグによって複数のコンテンツを指定する意味はありません。もしも確実に再生してもらいたい場合は、以下のページを参考にしてください。