序章

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

前提条件

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

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

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

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

  • controlsは、再生/一時停止、音量、シークのコントロールを追加します
  • loopは再生を繰り返します
  • autoplayはオーディオを自動的に再生します
  • preloadは、 none 、 metadata 、またはautoの値を取ることができます。 デフォルトはautoです。 複数のaudio要素を含むページでは、 none に設定すると、ブラウザがすべてのオーディオデータをダウンロードできないようにすることができます。

フォーマットのサポート

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サイトを構築する方法」を参照してください。