[66] 音声をプラグイン無しで組み込もう audio要素・source要素

<audio>要素は、音声をプラグイン無しで再生させるための要素。
<source>要素はメディア要素の子要素で、複数のメディアソースを指定。
というわけで <audio>要素の使い方は、<video>要素とほぼ同じです。

<audio>要素は、<video>要素とあわせて「メディア要素（Media Element）」と言われ、HTML5からの新要素です。
メディア要素には共通の属性 src, controls , autoplay, loop, muted, preload, mediagroupがあります。

使用する要素	<audio> 〜 </audio> <source>（空要素。終了タグは不可）

<audio>の属性 （一覧はこちら）	src	：組み込むファイルのURL
	controls	：コントローラを表示
	autoplay	：自動再生する
	loop	：ループ再生する
	muted	：ミュート（消音）で再生する
	preload	：プリロードするかどうか
	mediagroup	：複数のメディアを同期させる
	グローバル属性

<source>の属性	src	：組み込むファイルのURL
	type	：組み込むファイルのMIMEタイプ
	media	：メディアタイプを指定。デフォルトはall
	グローバル属性

まずは<audio>要素だけで音声を組み込んでみよう

<audio>要素の src属性で音声ファイルのURLを指定します。
controls属性をつければ、ブラウザがコントローラを表示してくれます。

サンプルはこちらです。
↓クリックで別ウィンドウで開きます。

HTMLはこちら。

<audio src="audio/sample.mp3" controls preload="auto">
  <p>このブラウザは音声再生に対応していません</p>
</audio>
<!--中に入れたテキストは audio要素に対応していない古いブラウザ用です-->

<source>でファイルを複数指定すればOK

音声データも、画像データのときと同じくコーデック問題があります。
ブラウザ（のバージョン）によってサポートする形式が違うので、<audio>でも、 <source>要素で複数のファイルを指定し、どのブラウザでも再生できるようにすることができます。（同じ音声ファイルを複数の異なる形式で保存しておく必要があります）

例えば、MP3（IE, Chrome, Safari が先にサポート）形式と、WAV（Chrome, Firefox, Opera, Safari が先にサポート）形式のファイルを指定しておけば、<audio>要素に対応してるどのブラウザでも再生します。
（MP3とOGG（Chrome, Firefox, Opera がサポート）という組み合わせもOK。詳細後述）

サンプルはこちら。
↓クリックで別ウィンドウで開きます。

HTMLはこちら。

<audio controls preload="auto">
  <source src="audio/sample.mp3" type="audio/mp3">
  <source src="audio/sample.wav" type="audio/wav">
  <p>このブラウザは音声再生に対応していません</p>
</audio>

<source>要素を使う時は、<audio>要素にsrc属性を使えません。
src以外の属性（controls, preload など）はそのままで、srcだけ取り除きます。

<source>要素では、src属性でファイルのURLを、type属性でMIMEタイプを指定。
ここまでで、たいていのブラウザ（最新ver.）で再生できます。

さらに、<source>要素の media属性で、メディアタイプを指定することもできます。

<audio>に未対応のブラウザのために代替コンテンツを入れよう

動画のときと同じく、<audio>と</audio>の間に、未対応ブラウザ向けの代替コンテンツとして <embed>要素を入れてプラグインで音声を再生させれば、古いブラウザでもOK。
<audio>に対応したブラウザは、中の<embed>要素を無視します。

サンプルはこちら。
↓クリックで別ウィンドウで開きます。

HTMLはこちら。

<audio controls preload="auto">
  <source src="audio/sample.mp3" type="audio/mp3">
  <source src="audio/sample.wav" type="audio/wav">
  <embed src="audio/sample.wav" type="audio/wav" width="240" height="50" autostart="false" 
  controller="true" loop="false"  pluginspage="http://www.apple.com/jp/quicktime/download/">
</audio>

音声変換は iTunes が簡単

動画と同じく、<source>要素で複数のファイルを指定する時は、
同じ音声を、ファイル形式を変えて（最低2コ）サーバに上げておく必要があります。
音声ファイルを違う形式に変換するには「iTunes」が手っ取り早いです。

「iTunes」を開き（無い人はココからダウンロード）、

1. 「編集」＞「設定」（Macは「iTunes」＞「環境設定」）
2. 「一般」画面の右下「読み込み設定」を押す（「CDがセットされたとき」という欄）
3. 「読み込み方法」のセレクタでMP3やらWAVやらを1つ選ぶ
4. 「iTunes」の画面に変換したいファイルをドロップして追加する
5. 上のファイルを選択してから「ファイル」>「新規バージョンを作成」
6. 「○○（さっき設定した形式）バージョンを作成」を選択
   （または右クリック（Macは control+クリック）で「○○バージョンを作成」）
7. できたファイルはドラッグ＆ドロップで好きなところにコピーできます

注意や追加情報などはAppleの「iTunes：曲を別のファイルフォーマットに変換する方法」を見てね。

各ブラウザのサポートする音声ファイルの形式

動画と同じく、音声も「コーデック」と呼ばれる方式があり、
ブラウザ（のバージョン）ごとにサポートする形式が違います。

音声の場合は歴史が古いので、音声形式すごい種類が多いのですが、
<audio>で使う音声コーデックの代表的なものは、次の3つだそうです。

MP3（エムピースリー）

音声フォーマットのなかでも古くからあって代表的。拡張子は「.mp3」

MPEGが開発した規格で、MPEG-1 Audioのレイヤー3のこと。圧縮率が高いのに、ヒトの聴覚では温室の劣化を感じない優れもの。特許制限あり。

Ogg Vorbis（オッグ ヴォルビス）

OggはXiph.Org Foundationによって規格化されたコンテナフォーマット。
Ogg VorbisはOggの中で1番有名なモノで、このコンテナを使って、音声圧縮にVorbisを用いたフォーマット。拡張子は「.ogg」

MP3などが特許制限があるので、パテントフリーの音声フォーマットとして開発されたそうです。
Ogg Vorbis は、グーグルの動画形式WEBMの音声コーデックとしても使われています。
同じOggコンテナで Speex（人の声に特化した音声コーデック）、FLAC（可逆（元に戻せる）音声コーデック）、 Theora（動画）などがあります。

WAVE（ウェーブ）

WAVも同じモノ。MicrosoftとIBMにより開発された音声形式。拡張子は「.wav」

正式名称は「RIFF waveform Audio Format」。Windowsで一般的に使われて普及。
AVI（Windows標準の動画形式）の音声部分に使われています。特許制限あり

各ブラウザの音声形式のサポート状況は、こうなっているそうです。
（2018年6月時点。参考：audio及びvideoで対応しているメディア形式 | MDN）

	MP3 (.mp3)	Ogg Vorbis (.ogg)	WAVE (.wav)
IE	○	×	×
Safari	○	×	○
Chrome	○	○	○
Firefox	○	○	○
Opera	○	○	○

mediagroup属性で同期させることも

メディア要素は、mediagroup属性で同じグループ名を付けた動画どうし、動画と音声、音声どうしがグループとして扱われ、同期再生などができます。
この属性、今のところ Chromeしか対応していないようです。

mediagroup属性に関しては、次回紹介します。

<audio>の属性一覧

src="URL"

組み込むファイルのURL。
<audio>要素はsrcを1つしか指定できないので、複数のファイルを指定する場合は、ここでは指定せず<source>要素で複数指定する。

<audio src="audio/sample.mp3" controls preload="auto"></audio>

controls（または「controls=""」「controls="controls"」 ）

コントローラーを表示。ユーザが再生・ポーズ・音量調整などを行える。

<audio src="audio/sample.mp3" controls preload="auto"></audio>

autoplay（または「autoplay=""」「autoplay="autoplay"」 ）

ロード後すぐに自動再生する。

<audio src="audio/sample.mp3" autoplay controls preload="auto"></audio>

loop（または「loop=""」「loop="loop"」 ）

ループ再生する。

<audio src="audio/sample.mp3" loop controls preload="auto"></audio>

muted（または「muted=""」「muted="muted"」 ）

消音再生する。

<audio src="audio/sample.mp3" muted controls preload="auto"></audio>

preload="none" または "metadata" または "auto"

3つの値のいずれかで、ブラウザにプリロードに関してのヒントを指定。
（実際にプリロードするかどうかはブラウザに依存するんだそうです）

• none：必要になったら初めて読み込む
• metadata：メタ情報のみプリロード
• auto：ブラウザにおまかせ（ブラウザがプリロードしてもOKという指示）

<audio src="audio/sample.mp3" controls preload="auto"></audio>

mediagroup="グループの名前（任意）"

この属性で同じグループ名を付けた動画どうし、動画と音声、音声どうしがグループとして扱われ、同期再生などができる。
今のところChrome以外は「mediagroup.js」が必要。

<audio controls preload="auto" mediagroup="audiogroup">
  <source src="audio/sample.mp3" type="audio/mp3">
  <source src="audio/sample.wav" type="audio/wav">
</audio>
<audio controls preload="auto"mediagroup="audiogroup">
  <source src="audio/sample2.mp3" type="audio/mp3">
  <source src="audio/sample2.wav" type="audio/wav">
</audio>

mediagroup属性に関しては、次回 [67] でサンプルを紹介します。

このほかグローバル属性も使います

id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は「mediagroup属性」について書いています。
これは「メディア要素（<video>要素と <audio>要素）」の共通の属性で、 複数のメディア要素をグループとしてまとめて同期再生させるものでしたが、HTML5.1 で削除されました。
というわけで、指定しても使えませんのでご注意ください。
（記事は「mediagroup.js」に触れている部分をメインに残しています）