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

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

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

audioタグとは

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

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

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

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

主要ブラウザの最新バージョンは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以外には対応していました。
その他は対応ブラウザが少ないので除外。

コード紹介

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

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

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

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

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

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

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

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

http://dova-s.jp/

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

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

まとめ

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

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

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

この記事を書いた人

杉尾成行

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

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

前職：ライター、小説家

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

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