ウェブランサー

<audio> ドキュメント内に音声コンテンツを埋め込む

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
フレージング・コンテント
エンベッテッド・コンテント
親にできる要素 エンベッテッド・コンテントが期待される場所
子にできる要素 メディア要素を含まないトランスパレント・コンテンツ
対応ブラウザ <audio>の対応状況を確認する

<audio>タグの説明

<audio>は、HTMLドキュメント内に音声コンテンツを埋め込むために使用します。<audio>は、HTML5から新たに追加された要素です。このタグの登場によって、閲覧者のブラウザ環境にプラグインがインストールされているかどうかを気にすることなく、文章内へ簡単にマルチメディアコンテンツを埋め込むことが出来るようになりました。

代表的な音声ファイルのフォーマットは、「MP3(.mp3), Vorbis(.ogg), WAVE(.wav), AAC(.aac)」などがあります。しかし、ブラウザ間で同一のフォーマットをサポートしている状態ではないため、ブラウザの種類やバージョンによって再生できるフォーマットが異なります。これは主に特許の問題によるものです。

実際に利用する際には、主要ブラウザが再生できるフォーマットを確認し、複数のソースを指定することによって問題を解決します。利用者のターゲットに<audio>をサポートしないブラウザが含まれる場合には、 JavaScript等を用いた補助を記述する必要があります。

<audio>は、とにかくウェブページに音源や音声を貼り付けて、気軽に再生させたいという目的に向いています。今まで、FlashやWindows Media PlayerやQuick Timeなどのプラグインを用いていた作業が、たった数行のマークアップで簡単に実現できてしまう魅力ある要素です。スマートフォンやタブレットの登場によって、ウェブページが見られる環境は多様化しました。デバイスやアプリケーションが多様になった分だけ、フロントエンジニアやウェブデザイナーはマークアップに気を使わなければなりません。そのような複雑な環境において、<audio>は今後重宝されるタグの一つになるでしょう。

<audio>タグの特徴

<audio>はページ内に複数使うことができます。原則として、この要素自体を入れ子構造にすることはできません。

この要素にcontrols属性を指定した場合、ブラウザは再生・一時停止、音量、シークなどの各機能をコントロールするインターフェイスを表示します。

<audio>タグに指定できる属性

autoplay
ページを読み込んだ際に音源の再生を自動的に開始します。値は省略可能です。
controls
ブラウザに再生・一時停止、音量、シークなどの各機能をコントロールするインターフェイスを表示します。値は省略可能です。
crossorigin
他サイトのファイルを読み込む際に、認証情報の扱いを指定します。特定の値が存在します。"anonymous"は、認証情報を使用しません。"use-credintials"は、認証情報を使用します。
loop
音源の再生が終わったら、自動的にループ再生します。値は省略可能です。
mediagroup
複数のメディアファイルをグループで取り扱う際にグループ名を指定します。値は任意の文字列を指定します。
muted
音声をミュート状態にします。値は省略可能です。
preload
ページの読み込み時に音声ファイルの取り扱いを設定します。特定の値が存在します。"auto"は、事前に読み込みます。"none"は、事前に読み込みません。"metadata"は、メタデータだけ読み込みます。
src
音声ファイルのパスを指定します。値は音声のソースがアップロードされているURLです。

<audio>タグの使い方とサンプル

<audio>の最も基本的な使い方です。再生させたい音声ファイルのパスを、以下のようにsrc属性に指定します。

HTML
<audio src="音声ファイルのパス" controls></audio>

上記のように、再生させたい音声ファイルのパスを<audio>のsrc属性で指定することができますが、これでは単一のファイルフォーマットしかサポートすることが出来ずに、そのフォーマットが読み込めないブラウザでは音声を再生することができなくなってしまいます。そのため、複数のファイルフォーマットを指定するには、以下のように<source>タグを使ってマークアップします。

HTML
<audio controls>
	<source src="filepass.mp3" type="audio/mp3">
	<source src="filepass.ogg" type="audio/ogg">
	<p>ご利用のブラウザは音声ファイルの再生に対応していません。</p>
</audio>

<audio>には、グローバル属性の他にいくつかの属性が用意されています。中には音声ファイルをコントロールするために役立つ物があるので、音声を普通に再生できるようになったら試してみましょう。以下は、ページが読み込まれた時に音声を自動的に再生させて、音源の再生が終わったら自動的にループさせたい場合のサンプルです。

HTML
<audio controls autoplay loop>
	<source src="filepass.mp3" type="audio/mp3">
	<source src="filepass.ogg" type="audio/ogg">
	<p>ご利用のブラウザは音声ファイルの再生に対応していません。</p>
</audio>

<audio>で読み込んだオーディオファイルを、JavaScriptでコントロールすることもできます。preload属性にautoを指定しておくことで、予め音源を読み込ませておくことができます。

HTML
<div class="button_box">
	<button id="play">Play</button>
</div>
<audio preload="auto" id="sound">
	<source src="click_sound.mp3" type="audio/mp3">
	<source src="click_sound.ogg" type="audio/ogg">
</audio>
JavaScript
<script type="text/javascript">
var myAudio=document.getElementById("sound");

document.getElementById('play').onclick = function() {
	play();
}

function play() {
	myAudio.play();
}
</script>

<audio>に関連するHTMLタグ

コンテンツエンベット要素
<area> イメージマップの領域を指定する
<audio> ドキュメント内に音声コンテンツを埋め込む
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<embed> プラグインデータを埋め込む(NN独自)
<iframe> インラインフレームを作成する
<img> 画像を表示する
<map> 一つの画像に対して複数のリンクを設定する
<object> FLASHやデータを埋め込む
<param> パラメーターを指定する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<script> JAVAなどのスクリプトを埋め込む
<track> 動画や音声ファイルに字幕やキャプションを追加する
<video> ページ内に動画コンテンツを表示する