[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を指定します。<video>要素と同じですね。
controls属性をつければ、ブラウザがコントローラを表示してくれます。

<audio src="audio/sample.mp3" controls preload="auto">
<p>このブラウザは音声再生に対応していません</p>
</audio>
<!--<p>のテキストは audio要素に未対応の古いブラウザ用。embed のほうがいいね-->

上のソースのサンプルはこちらです。
クリックで別ウィンドウで開きます。

上のサンプルを Opera で開くと、MP3は再生されません。<audio>要素に対応しているが、MP3は再生できない状態です。( Firefox は、ver.26 でMP3 に対応したようです)
Chrome、IE、Safari ではMP3をサポートしているので再生されます。(IE8以下は未対応)

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

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

<audio>要素内に、<source>要素で複数のファイルを指定してみましょう。

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

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

上のソースのサンプルはこちら。
クリックで別ウィンドウで開きます。
(先ほどのサンプルファイルの2番目のサンプルです)

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

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

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

また、<source>要素の src属性で、MIMEタイプのコーデックス(codecs)パラメータを、さらに詳しく指定することもできるんだそうです。(ただ、コレ無しでも最新ブラウザは十分表示します)
MIMEタイプのコーデックス パラメータのサンプルがこちらにありますので(少し古いようですが…)ご覧ください。

音声変換は 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標準の動画形式)の音声部分に使われています。特許制限あり

各ブラウザの音声形式のサポート状況は、こうなっているそうです。
( Firefox ver.26 は MP3 に対応したようです。)

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

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

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

<audio controls preload="auto">
  <source src="audio/sample.mp3" type="audio/mpeg">
  <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>

上のソースのサンプルはこちら。
クリックで別ウィンドウで開きます。
(先ほどのサンプルファイルの3番目のサンプルです)

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/mpeg">
  <source src="audio/sample.wav" type="audio/wav">
</audio>
<audio controls preload="auto"mediagroup="audiogroup">
  <source src="audio/sample2.mp3" type="audio/mpeg">
  <source src="audio/sample2.wav" type="audio/wav">
</audio>
mediagroup属性に関しては、次回 [67] でサンプルを紹介します。
このほかグローバル属性も使います
id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

<video>、<audio>要素の「メディア要素」の共通の属性「mediagroup属性」は、
複数のメディア要素をグループとしてまとめて、同期再生などをさせます。
次回は、この「mediagroup属性」を使ってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.