この記事の概要
Web上のオーディオ
HTML5以前は、オーディオファイルはプラグインのあるブラウザ（フラッシュなど）でしか再生できませんでした。
HTML5の <audio> 要素は、Webページに音声を埋め込むための標準的な方法を指定します。
ブラウザのサポート
表中の数字は、<audio> 要素を完全にサポートする最初のブラウザバージョンを示しています。
| ブラウザ | クローム | IE/エッジ | ファイアフォックス | サファリ | オペラ |
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
スポンサーリンク
HTMLの <audio> 要素は、Webページに音声を埋め込むための標準的な方法を指定します。
HTMLでオーディオファイルを再生するには、次の<audio> 要素を使います。
例文
<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>
HTMLオーディオ – 仕組み
controls 属性は、再生、一時停止、音量などのオーディオコントロールを追加します。
<source> 要素を使用すると、ブラウザから選択できる代替オーディオファイルを指定できます。ブラウザは最初に認識されたフォーマットを使用します。
<audio> タグと </audio> タグの間のテキストは、<audio> 要素をサポートしていないブラウザにのみ表示されます。
スポンサーリンク
HTMLオーディオ – ブラウザのサポート
HTML 5では、3つのサポートされているオーディオフォーマットがあります：MP3、WAV、とOGG
さまざまなフォーマットに対するブラウザのサポートは次のとおりです。
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTMLオーディオ – メディアタイプ
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
スポンサーリンク
HTMLオーディオ – メソッド、プロパティ、イベント
HTML5は<audio> 要素のDOMメソッド、プロパティ、そしてイベントを定義します。
これにより、オーディオをロード、再生、一時停止したり、長さや音量を設定したりできます。
オーディオの再生が開始されたとき、一時停止されたときなどに通知するDOMイベントもあります。
HTML5 オーディオタグ
音声コンテンツを定義します
| Tag | 説明 |
|---|---|
| <audio> | 音声コンテンツを定義します |
| <source> | <video> や <audio>などのメディア要素の複数のメディアリソースを定義します |