HTML & CSS - audio タグ

基本的な使い方

audio タグはページに音楽コンテンツを埋め込むために使用します。audio タグの基本的な書き方は、以下のようになります。

<audio controls src="埋め込むコンテンツのパス"></audio>
audio タグの基本的な書き方

audio タグは img タグと同様に、埋め込みたいコンテンツのパスを src 属性に指定します。また controls 属性を指定することで、ブラウザ側でオーディオ再生プレイヤーを表示してくれます。

<p> ICQ Message.mp3 </p>
<audio controls src="https://murashun.jp/media/icq-message.mp3"></audio>
audio タグの基本的な書き方

ICQ Message.mp3

ブラウザ表示

使用上の注意

audio タグに controls 属性を含めることで、ブラウザ側でオーディオ再生プレイヤーを表示してくれます。オーディオ再生プレイヤーには、再生・停止ボタンや、シークバー、音量調節などの機能が含まれます。

ただし、オーディオ再生プレイヤーはブラウザ毎にデザインが異なります。オーディオ再生プレイヤーのデザインをカスタマイズしたい場合は controls 属性を外し、JavaScript で独自のオーディオ再生プレイヤーを作成する必要があります。CSS ではブラウザ規定のオーディオ再生プレイヤーをカスタマイズできません。

自動再生

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

  • autoplay は、ユーザの意図しないタイミングで再生されるため、基本的には使用するべきではありません。そのため、主要なブラウザでは 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 タグ内にテキストを記述しておくと、audio タグに対応していないブラウザでページを開いた場合、そのテキストが表示されます。ただし、現在では主要なブラウザはすべて audio タグに対応しているため、記述する意味はありません。

<audio controls src="/media/music.mp3"> audio タグは未サポートです </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 タグによって複数のコンテンツを指定する意味はありません。もしも確実に再生してもらいたい場合は、以下のページを参考にしてください。

外部リンク

外部リンク

外部リンク