HTML の audio 要素を使用すると、Web ページ内に音声コンテンツを埋め込むことができます。

audio 要素の使用例

次の例では、音声ファイル (coin.mp3) を再生するためのコントールパネルを表示しています。

<audio src="coin.mp3" controls>
  <p><a src="coin.mp3">音声ファイルをダウンロード</a></p>
</audio>

<audio> 〜 </audio> のブロック内には、audio 要素がサポートされていない環境で表示されるメッセージを記述することができます。 ここでは、コントロールパネルを表示できないときに、音声ファイルをダウンロードするリンクを表示するようにしています。

audio 要素の属性

audio 要素には、次のような属性が用意されています。 （論理属性）(boolean attributes) と書かれているものは、値を指定せずに単純にその属性名だけを記述すれば有効になる属性です。

src

再生する音声ファイルの URL を指定します。 source 要素を使って音声ファイルを指定する場合は、audio 要素の src 属性は指定できません。

controls （論理属性）

音声ファイルを再生するためのコントロールパネルを表示します。

autoplay （論理属性）

ページが読み込まれたときに、自動的に音声ファイルを再生します。

loop （論理属性）

ループ再生します。

muted （論理属性）

デフォルトの音量を 0 に設定します。

preload

音声ファイルのプリロード方法を指定します。

• none: 事前読み込みしない。
• metadata: 音声のメタデータのみ事前読み込みする。
• auto: 事前読み込みする。

指定しなかった場合の振る舞いは、ブラウザの実装に依存します。 preload の指定は、ブラウザにプリロードのヒントを与えるだけで、必ずしも指定した通りに振る舞うとは限りません。 例えば、autoplay 属性が指定されている場合は、音声ファイルをダウンロードしなければいけないことは明らかなので、preload="none" という指定は意味を持ちません。

crossorigin

元文書とは異なるオリジンからデータを取得する際の認証方法を指定します。 anonymous または use-credentials を指定します。

source 要素で複数の音声ファイルを指定する

audio 要素の src 属性の代わりに、次のように source 要素を使って、種類の異なる音声ファイルを指定することができます。 音声ファイルの MIME タイプを type 属性で指定します。 ブラウザがサポートしている MIME タイプのうち、最初に見つかった音声ファイルが再生されます。

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

使用しているブラウザがどの MIME タイプもサポートしない場合は、最後の要素として指定したメッセージが表示されます。