カテゴリー

キーワード

 
> audio要素を紹介します【HTML...

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


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

audio属性(IE8対応)

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


今回と次回でaudio要素を紹介します。


audioタグとは

audioタグはHTML5から新しく追加された、音声メディアを再生するためのタグ要素です。
これにより、閲覧者の環境にプラグインがインストールされているかどうかを気にすることなく、Webサイトに音声プレイヤーを設置できるようになります。


説明不要でコードのみ欲しい方はこちらへ。ファイル形式はMP3(.mp3)とWAVE(.wav) です。


各ブラウザ、audio属性サポート状況

いつも通り、Web関係者ご用達のCan I useを見に行きます。


audio属性の各ブラウザ対応状況

主要ブラウザの最新バージョンはaudio属性をサポートしています。
IE8以下に対応させなくてよい場合は、普通に使えるということですね。


ブラウザにより再生できる形式が違う

ブラウザにより再生できるフォーマットが違います。


音声ファイルの代表的なフォーマットとしては
AAC(.aac), MP3(.mp3), Vorbis(.ogg), WAVE(.wav) 』
があります。


再び、Web関係者ご用達のCan I useを見に行きます。


が、audioタグの対応状況はあれども、フォーマットについては記載がない…。
(探せばあるのかもしれませんが、僕は見つけられませんでした)


この際なので、検証がてら主要5ブラウザ(IE,Google Chrome,firefox,Safari,Opera)の最新バージョンで試してみました。
すると、MP3(.mp3)は全てのブラウザで再生可能でした。(Android,iOSも検証済み)


WAVE(.wav)もIE以外には対応していました。
その他は対応ブラウザが少ないので除外。


コード紹介

コードのみをシンプルに書くならこうなります。


<audio src="sample.mp3"></audio>

 

で、 video属性と同じく、複数並べる場合は、こうです。
audioタグの中にsourceタグを入れて、音源を記述してください。


MP3 (.mp3)だけでも大丈夫だと思いますが、念のためWAVE (.wav)も並べる場合はコチラです。
音声ファイルを複数並べた場合、source要素を上から順番に見て対応しているフォーマットの音声を再生します。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
    <articles>
        <audio controls>
            <source src="sample.mp3">
            <source src="sample.wav">
            <p>ご利用のブラウザではこの音声を再生できません。</p>
        </audio>
    </articles>
</body>
</html>

controls属性を必ず入れてください。
controlsがない場合、何も表示されません。


IE8にも対応のコードはこちらです
audioタグに対応していないブラウザ用にはembed要素を付け加えてください。


<!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>

IE8対応用のデモはコチラです。


audio属性に対応しているブラウザですと、embed要素は読み込まれません。


素材音源はコチラのものを使わせていただきました。ありがとうございました。

http://dova-s.jp/


MP3を変換するのに使用したフリーツール、XMedia Recodeはこちらからダウンロードできます。

http://www.forest.impress.co.jp/library/software/xmediarecode/


まとめ

今回は標準のコードを説明しました。


次回はaudio要素の属性を紹介したいと思います。


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

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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