HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5のaudio要素で使える主な属性とその使い方

HTML5では、<audio>要素を使うことで、プラグインに頼らずにWebページへ音声を簡単に埋め込めます。この要素には、再生コントロールの表示や動作を細かく制御するための複数の属性が用意されています。

audio要素の主な属性一覧

No.属性と説明
1autoplay
この真偽値属性を指定すると、データの読み込み完了を待たずに、再生可能になった時点で音声が自動的に再生されます。ただし、多くのブラウザでは意図しない自動再生を防ぐため、ミュート状態でない限り無効化される場合があります。
2autobuffer
この真偽値属性を指定すると、自動再生が設定されていない場合でも、音声データのバッファリングが自動的に開始されます。なお、現在のHTML仕様では廃止されており、代わりに後述のpreload属性を使用することが推奨されています。
3controls
この属性を指定すると、再生・一時停止、音量調整、シーク（再生位置の移動）などを操作できる標準のコントロールパネルが表示され、ユーザーが直接音声の再生を操作できるようになります。
4loop
この真偽値属性を指定すると、音声が最後まで再生された後に自動的に先頭へ戻り、繰り返し再生されます。BGMや環境音のループ再生などに便利です。
5preload
ページ読み込みの段階で音声ファイルを読み込み、すぐに再生できる状態にしておくかどうかを指定します。「none」「metadata」「auto」の値が指定でき、autoplayが設定されている場合は無視されます。
6src
埋め込む音声ファイルのURLを指定します。この属性は省略可能で、代わりに<audio>要素内に<source>要素を配置して、ブラウザごとに異なる形式の音声ファイルを指定することもできます。

基本的な記述例

以下は、コントロールを表示して音声を再生する最もシンプルな例です。

<audio src="sample.mp3" controls>
  お使いのブラウザはaudio要素に対応していません。
</audio>

また、複数の<source>要素を組み合わせれば、MP3やOGGなどブラウザごとに対応する形式を切り替えることも可能です。

<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  <source src="sample.ogg" type="audio/ogg">
</audio>

これらの属性を適切に組み合わせることで、ユーザーの環境に合わせた快適な音声再生を実現できます。

  1. HTMLのdata-*属性とは？カスタムデータ属性の基本と使い方を実例付きで解説

    HTMLのdata-*属性は、あらゆるHTML要素に独自のカスタムデータを埋め込むために使用されるグローバル属性です。グローバル属性であるため、どの要素に対しても自由に利用できます。 JavaScriptと連携して要素に関連付ける情報を持たせたい場合などに非常に便利で、モダンなWeb開発では広く活用されています。 data-*属性の書き方（構文） 基本的な構文は以下の通りです。 <element data-属性名=値> ここで注意すべきポイントは次の2つです。 属性名には小文字のみを使用する（大文字は使用不可） 接頭辞「data-」の後に、少なくとも1文字以上の文字が必要 da

  2. HTML属性とは？基本構文からol・textareaの実用例までわかりやすく解説

    HTML属性（attribute）は、画像やキャンバスの幅・高さのように、要素に対してプロパティを設定するために使用されます。すべての要素は属性を持つことができ、要素に関する追加情報をブラウザに伝える役割を果たします。属性は「名前」と「値」のペアで構成されます。以下はその基本的な例です。<canvas id="newCanvas" width="400" height="300">その他の属性の例も見てみましょう。<img alt="代替テキスト">HTML5の標準仕様では、属性値を引用符で