開発者ドキュメント

HTML5を使用してオーディオを追加する方法

序章

HTML5 audio要素のおかげで、Webページにオーディオファイルを含めるためにFlashを使用しなければならなかった時代は終わりました。 この簡単なチュートリアルでは、新しいタグを使用してHTMLにオーディオを追加する方法を示します。

前提条件

<audio>タグを使用したHTML5へのオーディオの追加

<audio>タグを使用してHTML5にオーディオを追加する方法は次のとおりです。

index.html
<audio controls loop autoplay preload="none"
  src="deep-house-track.mp3">
</audio>

オーディオ要素で使用できる属性がいくつかあります。

フォーマットのサポート

MP3はオープンフォーマットではないため、複数のフォーマットを提供することをお勧めします。そのため、一部のブラウザはそれをサポートできません。 無料のフォーマットであるOggは、全面的に優れていますが、すべてのブラウザーでサポートされているわけではありません。 ブラウザ形式のサポートのリストについては、ここを参照してください。 audio要素内のsource要素を使用して、さまざまな形式を提供します。

index.html
<audio>
  <source src="deep-house-track.ogg">
  <source src="deep-house-track.mp3">
</audio>

また、typeを提供することで、さらに徹底的にすることができます。

index.html
<audio>
  <source src="deep-house-track.ogg"
  type="audio/ogg">
  <source src="deep-house-track.mp3"
  type="audio/mp3">
</audio>

また、audioをサポートしていないブラウザに追加のマークアップを提供できます。

index.html
<audio>
  <source src="deep-house-track.ogg">
  <source src="deep-house-track.mp3">
  <p>Your browser doesn't support this,
  <a href="">download the file</a>.</p>
</audio>

これは、HTML5の新しい<audio>要素の基本的な機能です。

結論

<audio>要素は、HTMLの重要な新機能です。 ブラウザのサポートを確認するには、 Webサイトを使用して、<audio>のブラウザサポートルックアップを使用できます。

または、HTML5マークアップ言語のより包括的なレビューについては、シリーズ「HTMLでWebサイトを構築する方法」を参照してください。

モバイルバージョンを終了