このページについて
このページではHTMLで使う事ができるaudioタグの使い方についての解説をしています。
audioタグ
audioはその名の通り、ページ中に音楽ファイルを埋め込むために使用されます。このaudioに関しては知っておきたいポイントがいくつかあるので、それらを詳しく解説していきます。
扱えるファイル
HTMLではMP3/wav/oggの3種類のフォーマットがサポートされています。Safariではoggがサポートされていないようですが、それ以外の主要ブラウザ・フォーマットはサポートされています。
ソース設定
audioは1つのオーディオファイルを設定して使うことも可能ではありますが、上で書いたように一部ではサポートされていない場合もありえます。そのほかにも、シンプルにネットが遅いとかで正しく取得できないとかいうケースも考えられます。
その場合を想定してソースを設定するのがオススメです。ソースはsourceタグを使って定義する事が可能で、1つのauido内に複数のsourceタグを使ってオーディオファイルを定義する事が可能となっています。
<audio>
<source src="オーディオファイル1" type="audio/ogg">
<source src="オーディをファイル2" type="audio/mpeg">
オーディオファイルが全て読み込めなかった場合にはこのテキストが表示されます。
</audio>仮に一番上のoggファイルが読み込みに失敗、もしくはサポートされていない場合に次のオーディオファイル2を読み込みます。このように設定することで作者が聞いて欲しいオーディオファイルをしっかりと再生させることが狙えます。
ちなみにですがソース中に書いてある「オーディオファイルが全て読み込めなかった場合にはこのテキストが表示されます。」というのはその名の通りで、オーディオファイルの読み込みが全て不発した場合に、代替えテキストとしてこの部分が表示されます。内容は自由なので、再読み込みを促すメッセージや設定を変更するように促すメッセージなど、利用者にどうしても聞いて欲しい場合はそういうメッセージを設定すると良いでしょう。
audioタグで使える属性
| autoplay | オーディオファイルの準備ができたらすぐに再生させる | |
|---|---|---|
| controls | オーディオコントロールボタンを表示します | |
| loop | 再生が終わったらループさせる | |
| muted | オーディオ再生をミュートにする | |
| preload | ページが読み込まれた時にオーディオファイルを読み込む必要があるかどうかを指定 | |
| src | オーディオファイルのURLを指定 |
オーディオファイルを再生するのに関連する属性を使うことができます。controlsのみプレビューとして作成しましたが、オーディオファイルは指定していないので完全に見た目だけを参考にしてください。
それぞれの詳しい解説については各属性のページを参考にしてみてください。
audioはグローバル属性・イベント属性どちらにも対応しています。
まとめ
audioはページ中にオーディオファイルを埋め込むために使います。そしてオーディオファイルのソース(音源)はいくつも設定することができます。全て読み込めなかった場合に表示する用のテキストを設定する機能もあります。
属性を使えば自動再生やコントロール、ループ再生なども可能となっています。ただし突然爆音で再生されると利用者がイラっとするのでそのあたりは注意が必要です。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。