HOME
audio タグはページに音楽コンテンツを埋め込むために使用します。埋め込みたいコンテンツのパスを src 属性に指定します。また controls 属性を指定することで、ブラウザ側でオーディオ再生プレイヤーを表示してくれます。
audio
タグはページに音楽コンテンツを埋め込むために使用します。audio
タグの基本的な書き方は、以下のようになります。
<audio controls src="埋め込むコンテンツのパス"></audio>
audio
タグは img
タグと同様に、埋め込みたいコンテンツのパスを src
属性に指定します。また controls
属性を指定することで、ブラウザ側でオーディオ再生プレイヤーを表示してくれます。
<p> ICQ Message.mp3 </p>
<audio controls src="https://murashun.jp/media/icq-message.mp3"></audio>
ICQ Message.mp3
audio
タグに controls
属性を含めることで、ブラウザ側でオーディオ再生プレイヤーを表示してくれます。オーディオ再生プレイヤーには、再生・停止ボタンや、シークバー、音量調節などの機能が含まれます。
ただし、オーディオ再生プレイヤーはブラウザ毎にデザインが異なります。オーディオ再生プレイヤーのデザインをカスタマイズしたい場合は controls
属性を外し、JavaScript で独自のオーディオ再生プレイヤーを作成する必要があります。CSS ではブラウザ規定のオーディオ再生プレイヤーをカスタマイズできません。
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
タグ内にテキストを記述しておくと、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
タグによって複数のコンテンツを指定する意味はありません。もしも確実に再生してもらいたい場合は、以下のページを参考にしてください。