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

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
エンベッデッド・コンテンツ
親にできる要素 エンベッデッド・コンテンツを受け入れる要素
子にできる要素 メディア要素を含まないトランスパレント・コンテンツ
対応ブラウザ caniuseで確認

<audio>タグの説明

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

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

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

<audio>は、とにかくウェブページに音源や音声を貼り付けて、気軽に再生させたいという目的に向いています。今まで、FlashやWindows Media PlayerやQuick Timeなどのプラグインを用いていた作業が、たった数行のマークアップで簡単に実現できてしまう魅力ある要素です。

スマートフォンやタブレットの登場によって、ウェブページが見られる環境は多様化しました。デバイスやアプリケーションが多様になった分だけ、フロントエンジニアやウェブデザイナーはマークアップに気を使わなければなりません。そのような複雑な環境において、<audio>は今後重宝されるタグの一つになるでしょう。

<audio>タグの特徴

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
  • この要素にcontrols属性を指定した場合、ブラウザは再生・一時停止、音量、シークなどの各機能をコントロールするインターフェイスを表示します。

<audio>に指定できる主な属性

autoplay
ページを読み込んだ際に音源の再生を自動的に開始します。値は省略可能です。
controls
ブラウザに再生・一時停止、音量、シークなどの各機能をコントロールするインターフェイスを表示します。値は省略可能です。
crossorigin
他サイトのファイルを読み込む際に、認証情報の扱いを指定します。この属性には特定の値が存在します。
  • anonymous:認証情報を使用しません。
  • use-credintials:認証情報を使用します。
currentTime
音声の再生位置を指定したり、変更することができます。メディアが読み込まれていれば、再生箇所を指定された時刻に移動します。
loop
音声の再生が終わったら、自動的にループ再生します。値は省略可能です。
muted
音声をミュート状態にします。値は省略可能です。
preload
ページの読み込み時に音声ファイルの取り扱いを設定します。特定の値が存在します。
  • auto:事前に読み込みます。
  • none:事前に読み込みません。
  • metadata:メタデータだけ読み込みます。
src
音声ファイルのパスを指定します。値は音源がアップロードされているURLです。<source>を使って、src属性を個別に制御することもできます。その場合、複数の代替コンテンツを配置することが可能となります。

<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>
var myAudio=document.getElementById("sound");

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

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

<audio>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する