audioタグとは?|サイトで音声ファイルを再生させてみよう

audioタグとは?|サイトで音声ファイルを再生させてみよう
リンゴ
博士、ブログで音声ファイルを再生できるようにしたいんですが、これって難しいですか?
博士
そんなことはないぞ。
<audio>タグを使えば、簡単に音声を再生させることが可能じゃ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<audio>タグとは

 

<audio>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ / エンベディッド・コンテンツ / controls属性がある場合:インタラクティブ・コンテンツ、 パルパブル・コンテンツ
利用場所エンベディッド・コンテンツが期待される場所
内容src属性がある場合:0個以上のtrack要素に続き、トランスペアレント(ただし、この要素の中に別のvideo要素やaudio要素を入れることは不可) / src属性がない場合:0個以上のsource属性に続き、0個以上のtrack要素、その後トランスペアレント(ただし、この要素の中に別のvideo要素やaudio要素を入れることは不可)


 
 
<audio>タグは、音声を再生する際に使用します。
<audio>タグに対応しているブラウザでは、プラグインを使わずに音声を再生することができます。

また、audio要素の中には、audio要素に対応していない環境で表示させる代替コンテンツを入れることができます。
 
 

博士
古いブラウザなどで表示されなかったときのために入力しておこう。
 
 

src属性

音声ファイルのURLを指定します。
複数の音声ファイルを指定したい場合は、audio要素のsrc属性ではなく、source要素のsrc属性を使用します。

 
 

スポンサーリンク

preload属性

音声データをあらかじめダウンロードするかどうかを指定します。
指定できる値は以下の通りです。
 

  • none
    音声が再生されるまで何もダウンロードしない
  •  

  • metadata
    メタデータ(音声のサイズ、トラックリスト、再生時間など)のみダウンロードする
  •  

  • auto
    音声データ全体をダウンロードする

 
 
値が空の場合は、「auto」として処理されます。

 
 
博士
例えば、ユーザーが音声を聴く可能性が低い場合は、「preload=”none”」を指定しよう。
 
 

autoplay属性

autoplay属性を指定すると、音声ファイルの再生準備が整い次第、自動的に再生が開始されるようになります。
この属性は、以下のいずれかの形式で指定します。

  • autoplay
  • auto=”autoplay”
  • autoplay=””
 
 
ただし、autoplay属性による自動再生機能は利用せず、ユーザーが自分で再生を始められるようにすることが推奨されています。
 
 

スポンサーリンク

loop属性

loop属性を指定すると、音声がループ再生されるようになります。
この属性は、以下のいずれかの形式で指定します。

  • loop
  • loop=”loop”
  • loop=””
 
 

muted属性

muted属性を指定すると、音声を出さずに再生されるようになります。
この属性は、以下のいずれかの形式で指定します。

  • muted
  • muted=”muted”
  • muted=””
 
 

スポンサーリンク

controls属性

controls属性を指定すると、音声ファイルの再生や停止などのコントロールが表示されるようになります。
この属性は、以下のいずれかの形式で指定します。

  • controls
  • controls=”controls”
  • controls=””
 
 
博士
コントロールの形状はブラウザによって異なるぞ。
 
 

使用例

 
 

表示例


 
 

スポンサーリンク

まとめ

音声を再生する際は、<audio>タグを使用します。
 
 

博士
再生機能も自分好みにカスタマイズしてみよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








audioタグとは?|サイトで音声ファイルを再生させてみよう