序章
HTML5 audio
要素のおかげで、Webページにオーディオファイルを含めるためにFlashを使用しなければならなかった時代は終わりました。 この簡単なチュートリアルでは、新しいタグを使用してHTMLにオーディオを追加する方法を示します。
前提条件
- HTML5の一般的な知識。 HTML5マークアップ言語の包括的なレビューについては、シリーズ「HTMLでWebサイトを構築する方法」を参照してください。
<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サイトを構築する方法」を参照してください。