<audio>タグの解説
<audio>は、ページ内に音声コンテンツを埋め込み再生できるメディアプレイヤーを提供します。表示されるユーザーインターフェイスは、ブラウザに実装されているものとなります。
<audio>は、HTML5から新たに追加された要素です。このタグの登場によって、閲覧者のブラウザ環境にプラグインがインストールされているかどうかを気にすることなく、文章内へ簡単にマルチメディアコンテンツを埋め込むことが出来るようになりました。
代表的な音声ファイルのフォーマットは、AAC（.mp4）、MP3（.mp3）、Vorbis（.ogg）、WAVE（.wav）などがあります。主要なブラウザは大体のフォーマットをサポートしていますが、ブラウザの種類やバージョンによって再生できるフォーマットが異なります。これは主に特許の問題によるものです。
この要素は、ひとつまたは複数の音源を含むことができます。実際に利用する際には、主要なブラウザが再生できるフォーマットを確認し、複数のリソースを用意することで問題を解決します。利用者のターゲットに<audio>をサポートしないブラウザが含まれる場合には、JavaScript等を用いた補助を記述する必要があります。
<audio>は、とにかくウェブページに音源や音声を貼り付けて、気軽に再生させたいという目的に向いています。同じように動画コンテンツを埋め込みたい場合は<video>を参照して下さい。
<audio>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
- この要素に
controls属性を指定した場合、ブラウザは再生・一時停止、音量、シークなどの各機能をコントロールするインターフェイスを表示します。
<audio>要素に指定できる属性
src- 音声ファイルのパスを指定します。値は音源がアップロードされているURLです。
<source>を使って、src属性を個別に制御することもできます。その場合、複数の代替コンテンツを配置することが可能となります。 controls- ブラウザに再生・一時停止、音量、シークなどの各機能をコントロールするインターフェイスを表示します。値は省略可能です。
autoplay- ページを読み込んだ際に音源の再生を自動的に開始します。値は省略可能です。
loop- 音声の再生が終わったら、自動的にループ再生します。値は省略可能です。
muted- 音声をミュート状態にします。値は省略可能です。
crossorigin- 他サイトのファイルを読み込む際に、認証情報の扱いを指定します。この属性には特定の値が存在します。
anonymous：認証情報を使用しません。use-credintials：認証情報を使用します。
preload- ページの読み込み時に音声ファイルの取り扱いを設定します。特定の値が存在します。
auto：事前に読み込みます。none：事前に読み込みません。metadata：メタデータだけ読み込みます。
<audio>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。src属性で埋め込むコンテンツのファイルを指定し、controls属性を有効にしてコンテンツを制御するためのインターフェイスを表示させます。
<audio src="file" controls></audio>
対応しているブラウザであれば、この段階でインターフェイスが表示されます。再生可能なコンテンツが読み込まれていれば操作可能な状態になります。以下のサンプルは何も読み込んでいないため、操作できないはずです。
メディアプレイヤーのインターフェイスはスタイルシートでサイズの変更が可能です。横幅をいっぱいまで広げる指定を追加した場合は以下のように表示されます。
audio {
/* 物理的な寸法指定 */
width: 100%;
/* 論理的な寸法指定 */
inline-size: 100%;
}
音声コンテンツを自動再生させる
オーディオファイルを自動的に再生させたい場合は、autoplay属性を追加します。この属性は論理属性であるため、値の記述は必要ありません。ブラウザはデータの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツを再生します。
<audio src="file" autoplay></audio>
音声コンテンツをループで再生させる
オーディオファイルが終了した時点でループ再生させたい場合は、loop属性を追加します。この属性は論理属性であるため、値の記述は必要ありません。
<audio src="file" loop></audio>
音声コンテンツの初期状態をミュートにする
オーディオファイルをミュートした状態で再生させたい場合は、muted属性を追加します。これはあくまで初期状態を消音にするものです。controls属性で操作パネルが有効になっていれば、ユーザーは任意のタイミングで音声を調整できます。この属性は論理属性であるため、値の記述は必要ありません。
<audio src="file" muted></audio>
複数の属性を組み合わせた記述例
<audio>にはいくつかの見慣れない属性があるため、初めて使う際に少し戸惑いますが、格機能は馴染のあるものなので、冷静に必要な機能を付け替えていけば問題ありません。
以下の例は、あえてコントロールパネルを提供せずにユーザーが操作できない自動再生、ループ再生のオーディオコンテンツを表しています。ページの中で差し障りない程度に背景音を流すために応用できる手段です。
<audio src="file" autoplay loop></audio>
音声が再生できない環境に配慮する
<audio>開始タグと終了タグの間に配置されたテキストは、この要素に対応していないブラウザが代替コンテンツとして表示します。何らかの理由で動画が再生できない環境を考慮して、以下のような内容を記述しておきましょう。
<audio src="file" controls>
<p>お使いのブラウザではこの音声を再生できません。</p>
</audio>
複数の音声フォーマットを提供する
ブラウザが音声ファイルの形式に対応していない環境を想定して、複数のメディアフォーマットを提供することもできます。<audio>の子要素に<source>を配置すると、ブラウザは上から順に利用可能な形式を探して、該当した最初のリソースを採用します。
<audio controls>
<source src="song.m4a" type="audio/aac">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<p>お使いのブラウザではこの音声を再生できません。</p>
</audio>
JavaScriptと組み合わせる
<audio>で読み込んだオーディオファイルを、JavaScriptでコントロールすることもできます。preload属性に"auto"を指定しておくことで、予め音源を読み込ませておくことができます。
<div class="button-block">
<button id="play">Play</button>
</div>
<audio preload="auto" id="sound">
<source src="click.ogg" type="audio/ogg">
<source src="click.mp3" type="audio/mpeg">
</audio>
<script>
// audio要素の取得
const myAudio = document.getElementById("sound");
// 再生ボタンの動作
document.getElementById('play').onclick = function() {
play();
}
// 再生ボタンが押された時の動作
function play() {
myAudio.play();
}
</script>
音声ファイルに歌詞やキャプションなどのトラックデータを与える方法は、<track>を参照して下さい。