audioタグ
タグ audio は、
HTMLページでの音声再生を制御します。
追加すると、ページにはプレーヤーが表示され、
「戻る」、「進む」、「停止」などのボタンがあります(その見た目と数はブラウザに依存します)。
ファイルへのパスは、属性 src またはネストされたタグ source で指定します。
タグ source は、
さまざまなフォーマットの音声ファイルへのパスを指定するために必要です(ブラウザは mp3 や wav など、異なるオーディオフォーマットをサポートしています)。
もしあるフォーマットの録音ファイルがある場合、それを他のフォーマットにも変換する必要があります。
タグ audio の内部には、HTMLでの音声をサポートしていないブラウザに表示されるテキストを記述できます(これはユーザーにそのことを知らせるためです)。
音声再生を制御するプレーヤーを表示したい場合は、属性 controls を追加する必要があります。
これがないと何も表示されず、音も出ません。プレーヤーがなくても音を出したい場合は、属性 autoplay を追加してください。
属性
| 属性 | 説明 |
|---|---|
src |
音声ファイルへのパスを指定します。
ただし、これにはタグ source を使用する方が良いです
(この場合、異なるフォーマットの音声を指定できます)。
|
preload |
サイトのページ読み込みと同時に音声ファイルを読み込むために使用されます。
取り得る値: none (ファイルを読み込まない、デフォルト)、
metadata (メタデータ情報のみを読み込む:再生時間など)、
auto (HTMLページの読み込み時に音声ファイル全体を読み込む)。
|
autoplay |
ページの読み込みが完了するとすぐに音が再生され始めます、
この場合、属性 preload の有無は無視されます。
値なしの属性。 |
controls |
音声ファイルに操作パネルを追加します。
この場合、属性 preload の有無は無視されます。
値なしの属性。 |
loop |
音声録音を「ループ」で繰り返します:終了後、最初から再生が再開されます。
この場合、属性 preload の有無は無視されます。
値なしの属性。 デフォルト(属性がない場合)、録音は 1 回のみ再生されます。
|
muted |
音声録音の音を無効にします。
値なしの属性。 デフォルト(属性がない場合)、録音の音は有効です。 |
例 . サイトページ上のプレーヤー
ページに音声録音付きのプレーヤーを追加しましょう。
タグ audio をサポートしていないブラウザ向けに、
そのことについての特別なメッセージが残されています:
<audio src="track.mp3" controls>
お使いのブラウザは、HTML5のaudioをサポートしていません。
</audio>
例 . sourseタグを使用したサイトページ上のプレーヤー
では、タグ audio の属性 src の代わりに、
タグ source を追加しましょう:
<audio controls>
<source src="track.mp3">
お使いのブラウザは、HTML5のaudioをサポートしていません。
</audio>