• 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日

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>などのメディア要素の複数のメディアリソースを定義します

コメントを残す