HTML 入門

HTML 音声 <audio> タグ

本セクションでは <audio> タグに焦点を当て、HTML ドキュメント内に音声を効率的に埋め込む方法を解説します。
基本的な実装方法から、オーディオ再生を制御するための各種属性までを網羅していきます。

1.  <audio>タグ：HTMLへの音声埋め込み

<audio> タグは、ウェブページに音声コンテンツを埋め込むための HTML5 要素です。これはコンテナとして機能し、一つまたは複数のオーディオソースを内包することで、ブラウザがサポートしている最適なフォーマットを選択できるようにします。

以下は、<audio> タグの基本的な使用例です。

<audio controls>
  <source src="audio/my_audio.mp3" type="audio/mp3">
  お使いのブラウザは audio 要素をサポートしていません。
</audio>

この例の解説：

  • <audio controls>: オーディオ要素の開始タグです。controls 属性は、ブラウザに標準のオーディオコントロール（再生、一時停止、音量など）を表示するよう指示します。
  • <source src="..." type="...">: 音声ソースを指定します。src 属性はファイルへのパス、type 属性はファイルの MIME タイプを指定します。
  • お使いのブラウザは...: これはフォールバックテキストです。ユーザーのブラウザが古く、<audio> タグをサポートしていない場合にのみ表示されます。

2.  <audio>タグの属性

<audio> タグは、再生方法や表示形式を制御するための様々な属性をサポートしています。以下に代表的な属性を挙げます。

  • src: 音声ファイルの URL を指定します。
    • 注意: タグに直接 src を記述することも可能ですが、ブラウザの互換性を高めるために通常は <source> タグの使用が推奨されます。
  • controls: 再生/一時停止ボタン、音量、プログレスバーなどのコントロールを表示します。
    • この属性がない場合、JavaScript でカスタムコントロールを実装しない限り、ユーザーは再生を操作できません。
  • autoplay: 音声がロードされた後、直ちに自動再生を開始します。
    • 突然音が流れるとユーザーを驚かせてしまうため、使用には注意が必要です。
  • loop: 音声が終了した後、自動的に最初から再生（ループ）させます。
  • muted: 初期状態を消音（ミュート）に設定します。ユーザーが手動で解除するまで音は聞こえません。
    • 背景音などでユーザーを邪魔したくない場合に有効です。
  • preload: ページロード時に音声をどのように読み込むかを指定します。以下の3つの値があります。
    • auto: ページロード時に音声ファイル全体をロードします。
    • metadata: メタデータ（ファイルサイズや再生時間など）のみをロードします。
    • none: ユーザーが操作するまでファイルをロードしません。帯域幅（Bandwidth）を節約したい場合に最適です。
<audio controls autoplay loop muted preload="metadata">
  <source src="audio/background_music.mp3" type="audio/mp3">
  お使いのブラウザは audio 要素をサポートしていません。
</audio>

この例では、音声は（ブラウザが許可すれば）自動再生され、ループし、初期状態はミュートで、ページロード時にはメタデータのみが読み込まれます。

3. 音声ファイルフォーマット

ブラウザによってサポートされるフォーマットは異なります。主なフォーマットは以下の通りです。

  • MP3: 最も広くサポートされており、一般的に使用されます。
  • WAV: 高品質で非圧縮のフォーマット。ファイルサイズが非常に大きくなる傾向があります。
  • Ogg Vorbis: オープンソースで特許制限のないフォーマット。

異なるブラウザで確実に再生させるためのベストプラクティスは、<source> タグを使用して複数のフォーマットを提供することです。現時点では、埋め込みの際にフォーマットの互換性を考慮する必要があるという点を理解しておきましょう。

4. 実戦的なサンプルとデモ

<audio> タグが実際にどのようなシーンで使われるか見ていきましょう。

4.1 サンプル 1：シンプルな背景音楽

リラクゼーションスパのウェブサイトを制作していると想定します。ユーザー体験を高めるために柔らかな背景音楽を追加したい場合：

<audio controls loop preload="auto">
  <source src="audio/spa_music.mp3" type="audio/mp3">
  お使いのブラウザは audio 要素をサポートしていません。
</audio>

ここでは loop 属性で音楽を途切れさせず、preload="auto" で即座に再生できるよう準備しています。テスト用に controls を付けていますが、実際の運用では CSS で隠したり属性を省いたりして、バックグラウンドでシームレスに流すこともあります。

4.2 サンプル 2：ゲームのSE（効果音）

オンラインゲームの開発で、ボタンクリックなどのインタラクションに音を付けたい場合：

<audio src="audio/button_click.mp3" preload="auto"></audio>

このケースでは controls 属性を省きます。音は通常、ユーザーがボタンをクリックした際などに JavaScript を通じてプログラム的にトリガーされるからです。preload="auto" によって、必要な瞬間に遅延なく再生されるようになります。

4.3 サンプル 3：簡易オーディオプレイヤー

標準的なコントロールを備えたシンプルなプレイヤーを作成する場合：

<audio controls>
  <source src="audio/my_song.mp3" type="audio/mp3">
  お使いのブラウザは audio 要素をサポートしていません。
</audio>

これが最も直接的な使い方であり、ユーザーに再生、一時停止、音量調節の標準的なインターフェースを提供します。