HTML4以前では、webサイトで音声を再生するには、フラッシュプレイヤーを埋め込んだりする必要がありました。しかし、HTML5ではaudioタグを使うことで、フラッシュプレイヤーなどを利用せずに音声を再生することが可能です。サイト上で、音声を再生させたいと考えてる人にはとても魅力的ではないでしょうか？
今回は、HTML5における、audioタグの使い方をご紹介します。
HTML5におけるaudioタグの使い方
|
1 |
<audio src="test.mp3" controls></audio> |
上記のコードを見てみると、src属性を使ってオーディオファイルを指定します。また、オーディオタグと、srcのファイル指定だけでは、サイト上に何も表示されないため、controls属性が必要になります。
表示例です。上記の記述をするだけで、このようにプレイヤーを表示させ、指定したファイルの再生を行うことができます。
audioタグの属性
| 属性 | 説明 |
| src属性 | 音声ファイルを指定する（複数指定が可能） |
| preload属性 | 音声をあらかじめ読み込む（auto、metadata、none） |
| autoplay属性 | 音声を自動再生する |
| loop属性 | ループ再生を指定する |
| controls属性 | インターフェースを表示する |
まとめ
audioタグの基本的な使い方は以上です。いきなり音が出るとびっくりする人もいるので、その辺りは考慮して、ユーザーに配慮した音楽再生を心がけましょう。
