<audio>

『audio』はHTMLに音声を埋め込むための要素で、BGMや効果音・ポッドキャストなどをブラウザ上で再生できます。

構文

<!-- 基本的な音声の埋め込み -->
<audio src="sound.mp3" controls></audio>

<!-- 複数のフォーマットを指定してフォールバック対応 -->
<audio controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  <p>お使いのブラウザは音声の再生に対応していません。</p>
</audio>

主な属性

属性	概要
src	再生する音声ファイルのURLを指定します。
controls	再生・停止・音量・シークバーなどのコントロールパネルを表示します。
autoplay	ページ読み込み時に自動再生します。ブラウザによっては制限される場合があります。
loop	音声が終了したら最初から繰り返し再生します。
muted	音声をミュートして再生します。
preload	音声データの事前読み込み方法を指定します（none / metadata / auto）。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>audioサンプル</title>
</head>
<body>

  <p>BGMプレイヤー</p>

  <!-- コントロール付きで音声を再生 -->
  <audio controls>
    <!-- OGGを優先し、非対応なら MP3 を使用 -->
    <source src="bgm.ogg" type="audio/ogg">
    <source src="bgm.mp3" type="audio/mpeg">
    <p>お使いのブラウザは音声の再生に対応していません。</p>
  </audio>

  <p>ループ再生のサンプル</p>

  <!-- ループ再生する音声 -->
  <audio src="ambient.mp3" controls loop></audio>

</body>
</html>

実行結果

ページ上に音声コントロールパネルが表示され、再生・停止・音量調節・シーク操作ができます。

┌──────────────────────────────────────┐
│  ▶  0:00 ──────────────────  🔊     │
└──────────────────────────────────────┘

概要

『audio』要素はHTML5で導入された要素で、Flashなどのプラグインなしにブラウザで音声を再生できます。MP3（audio/mpeg）は現在ほぼすべてのブラウザでサポートされています。OGGはオープンフォーマットでMP3より音質が良い場合もありますが、Safariでの対応が限られるため、複数の『source』要素で両フォーマットを指定しておくと安全です。

『autoplay』を指定しても、多くのブラウザではユーザーの操作なしに音声付きの自動再生はブロックされます。ユーザー体験を損なわないよう、自動再生は慎重に使用してください。BGMのような用途では、ユーザーが再生ボタンを押す『controls』付きの実装を推奨します。

動画ファイルを埋め込みたい場合は『video』要素を使用してください。