[66] 音声をプラグイン無しで組み込もう audio要素・source要素
最終更新日:2019年01月30日 (初回投稿日:2014年01月08日)
<audio>要素は、音声をプラグイン無しで再生させるための要素。
<source>要素はメディア要素の子要素で、複数のメディアソースを指定。
というわけで <audio>要素の使い方は、<video>要素とほぼ同じです。
<audio>要素は、<video>要素とあわせて「メディア要素(Media Element)」と言われ、HTML5からの新要素です。
メディア要素には共通の属性 src, controls , autoplay, loop, muted, preload, mediagroupがあります。
使用する要素 | <audio> 〜 </audio> |
---|
<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」を開き(無い人はココからダウンロード)、
- 「編集」>「設定」(Macは「iTunes」>「環境設定」)
- 「一般」画面の右下「読み込み設定」を押す(「CDがセットされたとき」という欄)
- 「読み込み方法」のセレクタでMP3やらWAVやらを1つ選ぶ
- 「iTunes」の画面に変換したいファイルをドロップして追加する
- 上のファイルを選択してから「ファイル」>「新規バージョンを作成」
- 「○○(さっき設定した形式)バージョンを作成」を選択
(または右クリック(Macは control+クリック)で「○○バージョンを作成」) - できたファイルはドラッグ&ドロップで好きなところにコピーできます
注意や追加情報などは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」に触れている部分をメインに残しています)
- 関連記事
-
- [69-5] Canvasにグラデーションやパターン、シャドウを指定しよう
- [69-4] Canvasに画像を描画しよう(トリミングやクリッピングも)
- [69-3] Canvasに曲線を描こう(線のスタイルも)
- [69-2] Canvasに基本的な図形を描こう
- [69-1] canvas要素でグラフィックスを表示する領域を作ろう
- [68] 動画や音声に字幕やキャプションを表示しよう track要素
- [67]「mediagroup属性」でメディア要素を同期させよう
- [66] 音声をプラグイン無しで組み込もう audio要素・source要素
- [65] 動画をプラグイン無しで組み込もう video要素・source要素
- [64] プラグインで再生されるコンテンツを組み込もう embed要素
- [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
- [62] 外部コンテンツを組み込もう object要素・param要素
- [61] イメージマップ(リンク領域)を作ろう map要素・area要素
- (ちょっとメモ)属性の「引用符」や「値」の省略について
- (ちょっとメモ)HTML5 での 省略可能なタグについて
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク