Web ページに音声を埋め込みたいとき、HTML だけで再生プレーヤーを設置できるのが audio 要素です。BGM・効果音・ナレーション・ポッドキャストなど、用途は意外と多くあります。この記事では audio 要素の基本的な書き方から、controls や loop といった属性、複数の音声形式を用意してブラウザに対応させる source の使い方までを、初心者にも分かるように解説します。
目次
audio 要素とは
audio 要素は、HTML に音声ファイルを埋め込むための要素です。かつては音声を再生するために Flash などのプラグインが必要でしたが、現在はこの要素だけでブラウザ標準の再生プレーヤーを表示できます。JavaScript を書かなくても、再生・一時停止・音量調整のボタンが付いたプレーヤーが手に入ります。
対応している音声形式は MP3・WAV・Ogg・AAC などです。なかでも MP3 は主要なブラウザすべてで再生できるため、まず用意しておけば困ることは少ないでしょう。
基本の使い方
もっともシンプルな書き方は、src 属性で音声ファイルのパスを指定し、controls 属性で操作パネルを表示する方法です。controls を付けないとプレーヤーが画面に表示されず、ユーザーが再生できなくなるので注意してください。
<!-- controls を付けて操作パネルを表示する -->
<audio src="sound/sample.mp3" controls></audio>これだけで、再生ボタン・シークバー・音量つまみが備わったプレーヤーが表示されます。見た目はブラウザによって少しずつ異なりますが、機能はどれもほぼ同じです。
audio 要素は開始タグと終了タグで囲む形で書きます。タグの間に書いたテキストは、audio 要素に対応していない古いブラウザでだけ表示される代替テキストになります。
<audio src="sound/sample.mp3" controls>
お使いのブラウザは audio 要素に対応していません。
</audio>よく使う属性
audio 要素には再生の挙動を制御するための属性がいくつか用意されています。代表的なものを下の表にまとめました。
| 属性 | 説明 |
|---|---|
controls | 再生・一時停止・音量などの操作パネルを表示する |
autoplay | ページ読み込み時に自動で再生を開始する |
muted | 最初から音を消した状態（ミュート）で読み込む |
loop | 再生が終わったら最初から繰り返す |
preload | 音声データを事前に読み込むかどうかを指定する（none / metadata / auto） |
これらは値を持たない「真偽属性」です。属性名を書けば有効、書かなければ無効になります。たとえば次のように複数をまとめて指定できます。
<!-- ミュート状態で自動再生し、繰り返す BGM の例 -->
<audio src="sound/bgm.mp3" autoplay muted loop></audio>preload で読み込みの量を調整する
preload は、ページを開いた時点でどれくらい音声を先読みするかを指定する属性です。値は3つあり、none はまったく読み込まない、metadata は再生時間などの基本情報だけ読み込む、auto は音声全体を読み込んでもよい、という意味になります。指定しない場合の挙動はブラウザに任されます。
ページに音声をいくつも置く場合や、必ずしも再生されるとは限らない音声では、preload="none" や preload="metadata" にしておくと、無駄なデータ通信を抑えられます。
source で音声形式を出し分ける
ブラウザによって再生できる音声形式は微妙に異なります。そこで、src 属性を使わずに、内側に複数の source 要素を並べる書き方があります。ブラウザは上から順に確認し、自分が再生できる最初の形式を選んで使います。
<audio controls>
<!-- 上から順に試し、再生できる形式が使われる -->
<source src="sound/sample.mp3" type="audio/mpeg">
<source src="sound/sample.ogg" type="audio/ogg">
お使いのブラウザは audio 要素に対応していません。
</audio>type 属性には音声の MIME タイプを書きます。MP3 は audio/mpeg、Ogg は audio/ogg、WAV は audio/wav です。type を書いておくと、ブラウザはファイルをダウンロードする前に再生可否を判断できるため、無駄な読み込みを減らせます。
とはいえ、現在は MP3 がほぼすべての環境で再生できるため、まずは MP3 を1つ用意し、必要に応じて他の形式を追加する、という考え方で十分です。
音声が再生されないとき
自動再生がブロックされる
autoplay を指定しても再生が始まらないことがあります。これは不具合ではなく、多くのブラウザが「ユーザーの操作なしに音を鳴らす自動再生」を制限しているためです。意図せず音が鳴ることはユーザー体験を損なうため、各ブラウザがこうした方針を取っています。
どうしても自動再生したい場合は、muted を付けて音が出ない状態にすると許可されやすくなります。BGM のように音を鳴らしたい場合は、自動再生に頼らず、ユーザーが再生ボタンを押して始める設計にするのが確実です。
ファイルのパスや形式を確認する
プレーヤーは表示されるのに再生できない場合は、まず src や source のパスが正しいかを確認しましょう。ファイルが見つからないと、再生ボタンを押しても反応しません。ブラウザの開発者ツールを開き、読み込みエラーが出ていないかを見ると原因をつかみやすくなります。
パスが正しいのに鳴らないときは、その形式にブラウザが対応していない可能性があります。MP3 形式に差し替えるか、source で複数形式を用意して試してみてください。
まとめ
audio 要素を使えば、HTML だけで音声プレーヤーを設置できます。要点を振り返ります。
srcで音声ファイルを指定し、controlsで操作パネルを表示するautoplay・muted・loop・preloadで再生の挙動を調整できる- 複数形式に対応させたいときは
sourceを並べ、typeで MIME タイプを示す - 自動再生はブラウザに制限されることがあり、
mutedなしでは始まらない場合が多い
まずは MP3 を1つ用意して controls 付きで設置し、必要に応じて属性や形式を追加していくのがおすすめです。