<audio>

対応:		HTML5（2014）

『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）。

サンプルコード

sample_audio.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>audioサンプル</title>
</head>
<body style="margin: 20px;">

  <!-- 基本：コントロール付きで音声を再生（複数フォーマットでフォールバック） -->
  <p>BGMプレイヤー</p>
  <audio controls>
    <!-- OGGを優先し、非対応なら MP3 を使用 -->
    <source src="bgm.ogg" type="audio/ogg">
    <source src="bgm.mp3" type="audio/mpeg">
    <p>お使いのブラウザは音声の再生に対応していません。</p>
  </audio>

  <!-- ループ再生とpreload -->
  <p>ループ再生（メタデータのみ事前読み込み）</p>
  <audio src="ambient.mp3" controls loop preload="metadata"></audio>

  <!-- JavaScriptで再生・停止を制御する -->
  <p>カスタムコントローラー</p>
  <audio id="myAudio" src="bgm.mp3" preload="none"></audio>
  <button onclick="document.getElementById('myAudio').play();">再生</button>
  <button onclick="document.getElementById('myAudio').pause();">停止</button>

</body>
</html>

実行結果

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

サンプルページはこちら

JavaScriptで再生を制御する

『audio』要素はJavaScriptから多彩なプロパティ・メソッドで制御できます。カスタムプレイヤーUIを作る場合に使います。

プロパティ / メソッド	概要
play()	再生を開始します。Promiseを返します。
pause()	再生を一時停止します。
currentTime	現在の再生位置（秒）を取得・設定します。値を変更するとシークできます。
duration	音声の総再生時間（秒）を取得します。
volume	音量を0.0〜1.0の範囲で取得・設定します。
muted	ミュート状態を取得・設定します（true/false）。
paused	再生中かどうかを取得します（true: 停止中）。
ended	再生が終了したかどうかを取得します（true: 終了）。
playbackRate	再生速度を取得・設定します（1.0が通常速度、2.0が2倍速）。

<audio id="player" src="bgm.mp3" preload="metadata"></audio>

<div>
  <button id="playBtn">再生</button>
  <button id="muteBtn">ミュート</button>
  <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
  <span id="timeDisplay">0:00 / 0:00</span>
</div>

<script>
var audio = document.getElementById('player');
var playBtn = document.getElementById('playBtn');
var muteBtn = document.getElementById('muteBtn');
var volumeSlider = document.getElementById('volumeSlider');
var timeDisplay = document.getElementById('timeDisplay');

// 再生・停止トグル
playBtn.addEventListener('click', function() {
  if (audio.paused) {
    audio.play();
    playBtn.textContent = '停止';
  } else {
    audio.pause();
    playBtn.textContent = '再生';
  }
});

// ミュートトグル
muteBtn.addEventListener('click', function() {
  audio.muted = !audio.muted;
  muteBtn.textContent = audio.muted ? 'ミュート解除' : 'ミュート';
});

// 音量スライダー
volumeSlider.addEventListener('input', function() {
  audio.volume = this.value;
});

// 再生時間の表示更新
audio.addEventListener('timeupdate', function() {
  var cur = Math.floor(audio.currentTime);
  var dur = Math.floor(audio.duration) || 0;
  timeDisplay.textContent =
    Math.floor(cur / 60) + ':' + ('0' + (cur % 60)).slice(-2) + ' / ' +
    Math.floor(dur / 60) + ':' + ('0' + (dur % 60)).slice(-2);
});
</script>

概要

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

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

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