HTML オーディオ
HTMLの<audio>要素は、Webページでオーディオファイルを再生するために使用されます。
HTML <audio>要素
HTMLでオーディオファイルを再生するには、<audio>要素を使用します。
例
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
お使いのブラウザはaudio要素をサポートしていません。
</audio>
HTML オーディオ - 仕組み
controls属性は、再生、一時停止、音量などのオーディオコントロールを追加します。
<source>要素を使用すると、ブラウザが選択できる代替オーディオファイルを指定できます。ブラウザーは、最初に認識された形式を使用します。
<audio>タグと</audio>タグの間のテキストは、<audio>要素をサポートしていないブラウザでのみ表示されます。
HTML <オーディオ>自動再生
オーディオファイルを自動的に開始するには、autoplay属性を使用します。
例
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
お使いのブラウザはaudio要素をサポートしていません。
</audio>
注：ほとんどの場合、Chromiumブラウザーは自動再生を許可しません。ただし、ミュートされた自動再生は常に許可されます。
autoplayの後にmutedを追加して、オーディオファイルの再生を自動的に開始できるようにします(ただしミュートされています)。
例
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
お使いのブラウザはaudio要素をサポートしていません。
</audio>
ブラウザのサポート
表内の数字は、<audio>要素を完全にサポートする最初のブラウザのバージョンを示します。
| 要素 | |||||
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML オーディオ形式
サポートされているオーディオ形式は、MP3、WAV、OGGの3 つです。さまざまな形式に対するブラウザーのサポートは次のとおりです。
| ブラウザ | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | はい | はい* | はい* |
| Chrome | はい | はい | はい |
| Firefox | はい | はい | はい |
| Safari | はい | はい | いいえ |
| Opera | はい | はい | はい |
※Edge79から
HTML オーディオ - メディアの種類
| ファイル形式 | メディアタイプ |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
HTML オーディオ - メソッド、プロパティ、およびイベント
HTML DOMは、<audio>要素のメソッド、プロパティ、およびイベントを定義します。
これにより、オーディオの読み込み、再生、一時停止、および継続時間と音量の設定が可能になります。
オーディオの再生開始、一時停止などを通知できるDOMイベントもあります。
完全なDOMリファレンスについては、HTML オーディオ/ビデオ DOMリファレンスを参照してください。
HTML オーディオタグ
| タグ | 説明 |
|---|---|
| <audio> | サウンドコンテンツを定義します |
| <source> | <video>や<audio>などのメディア要素の複数のメディアリソースを定義します。 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。