カテゴリー

キーワード

 
> audio要素の属性を紹介します...

audio要素の属性を紹介します【HTML5 実践編】


2015 年 3 月 9 日 投稿    view: 2156
タグ:
このエントリーをはてなブックマークに追加

audio要素(属性紹介)

こんにちは、WEBマーケティング部の杉尾です。


前回に引き続き、HTML5のaudio要素についてお話しさせていただきます。
今回はaudio要素の属性を紹介します。


前回の記事はコチラです。


audio要素を含んだソースコード

前回できあがったソースコードはこちらです。
主要ブラウザの最新バージョンとIE8にも対応可能です。


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
    <articles>
        <audio controls width="250px" height="150px">
            <source src="sample.mp3" type="audio/mp3">
            <source src="sample.wav" type="audio/wav">
            <embed src="sample.wav" type="audio/wav" width="240" height="50" autostart="false" controller="true" loop="false"  pluginspage="http://www.apple.com/jp/quicktime/download/">
        </audio>
    </articles>
</body>
</html>

属性一覧表

属性 意味
autoplay (autoplay) 省略可能 自動的に再生を開始
controls (controls) 省略可能 コントローラーを表示
loop (loop) 省略可能 ループ再生を行う
mediagroup="" 文字列(属するグループ名) 複数のメディアファイルをグループで取り扱うときのグループ名を指定
preload="" "auto" 事前に読み込む
"none" 事前に読み込まない
"metadata" メタデータだけ読み込む

ページ表示時に動画ファイルを読み込むかどうかの設定

(autoに関してはブラウザ依存なので、事前に読み込んでもよいというくらいの設定です)

src="" URL 音声ファイルのURL
crossorigin="" "anonymous" 認証情報を使用しない
"use-credintials" 認証情報を使用する
他サイトのファイルを読み込むとき認証情報をどうするか
muted (muted) 省略可能 音を出さない

省略可能と書いている値については、例えば『autoplay="autoplay"』とせずともタグ内に『autoplay』と記述するだけで指定可能ということです。

autoplay属性が指定されている場合は、preload属性の指定は無効となります。


【使用例】

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body style="padding:20px;">
    <articles>
        <div style="width:100%;height:100%;">
            <audio controls autoplay loop muted width="250px" height="150px">
                <source src="sample.mp3" type="audio/mp3">
                <source src="sample.wav" type="audio/wav">
                <embed src="sample.wav" type="audio/wav" width="240" height="50" autostart="false" controller="true" loop="false"  pluginspage="http://www.apple.com/jp/quicktime/download/">
            </audio>
        </div>
    </articles>
</body>
</html>

デモはコチラ


接続環境に配慮して、音を出さないように指定しています。
controls(コントロールバーを表示)、autoplay(自動再生)、loop(ループ再生)、muted(音を出さない)を指定しています。


まとめ

2回に分けてaudio要素の説明をさせていただきました。


video要素とaudio要素を使えるようになれば、HPにおける表現がより広がると思います。
是非、使ってみてください。


次回からはSVGとcanvas要素についてお話しさせていただきます。


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事