HTML5における<audio>タグの使い方

HTML4以前では、webサイトで音声を再生するには、フラッシュプレイヤーを埋め込んだりする必要がありました。しかし、HTML5ではaudioタグを使うことで、フラッシュプレイヤーなどを利用せずに音声を再生することが可能です。サイト上で、音声を再生させたいと考えてる人にはとても魅力的ではないでしょうか?

今回は、HTML5における、audioタグの使い方をご紹介します。

HTML5におけるaudioタグの使い方

上記のコードを見てみると、src属性を使ってオーディオファイルを指定します。また、オーディオタグと、srcのファイル指定だけでは、サイト上に何も表示されないため、controls属性が必要になります。

表示例です。上記の記述をするだけで、このようにプレイヤーを表示させ、指定したファイルの再生を行うことができます。

screenshot 236

audioタグの属性

属性 説明
src属性 音声ファイルを指定する(複数指定が可能)
preload属性 音声をあらかじめ読み込む(auto、metadata、none)
autoplay属性 音声を自動再生する
loop属性  ループ再生を指定する
controls属性  インターフェースを表示する

まとめ

audioタグの基本的な使い方は以上です。いきなり音が出るとびっくりする人もいるので、その辺りは考慮して、ユーザーに配慮した音楽再生を心がけましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

イベント