" WEBデザイン" の記事

HTML5のaudio要素で音楽をループ再生(PC/iOS/Android)

html5から追加されたaudio要素ですが、今まで存在は知っていたものの使ったことはありませんでした。先日、実案件でaudio要素を使う機会を得たので、その際にハマったことなどを少しメモしておきます。

今回の案件の要望は、
・ページを開いたらキービジュアルをフェードイン
・フェードインの開始と同時に音楽を自動再生
・音楽はループで流したい
というものでした。

audio要素って?

audio要素はHTML5から追加された新要素です。HTML5に対応している最新のブラウザならほぼ使えます。ただIE8では非対応のため、対象ブラウザにIE8が入っている場合は気を付ける必要がありそうです。

対応フォーマット

.m4a(AAC) / .mp3(MP3) / .ogg(OGG) / .wav(WAV)
ブラウザごとに対応フォーマットが異なるので、できればいくつかのフォーマットを用意しておくと良いです。
参考:ほんっとにはじめてのHTML5:[66] 音声をプラグイン無しで組み込もう (audio)(source)

audioタグの書き方

シンプルな書き方なら、こんな感じでsrc属性に音楽ファイル名を指定すればOK。

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

audio要素の中にsource要素を置くことも可能です。その場合は以下のように複数のsource要素を並べることもできます。ブラウザ側では、source要素を上から順番に見て、対応しているフォーマットの音声を再生します。
また、audio要素の直下にはaudio要素に対応していないブラウザ向け(または対応しているフォーマットがなかったとき用)のコンテンツを置くことができます。

<audio>
	<source src="sound.mp3">
	<source src="sound.m4a">
	<p>ご利用のブラウザではこの音声を再生できません。</p>
</audio>

audio要素には様々な属性を設定できます。プリロード、コントロール、自動再生、ループがよく使いそうな属性ではないでしょうか。
参考:HTML5_埋め込み_audio要素 プラグインを使わずに音声を再生する – TAG index Webサイト

自動でプリロードする
preload属性値にautoを指定します。

<audio src="sound.mp3" preload="auto"></audio>

コントロール(再生ボタンとか)を表示する
controls属性を設定します。

<audio src="sound.mp3" controls></audio>

自動再生を行う
autoplay属性を設定します。

<audio src="sound.mp3" autoplay></audio>

ループ再生を行う
loop属性を設定します。

<audio src="sound.mp3" loop></audio>

スマートフォンでは一部の属性が効かない

今回の
・自動再生
・ループ
という要件を考えると、以下のようなタグを書けばうまく行きそうでした。

<audio preload="auto" autoplay loop>
	<source src="sound.mp3">
	<source src="sound.aac">
	<p>ご利用のブラウザではこの音声を再生できません。</p>
</audio>

実際に、PC向けブラウザではだいたい大丈夫だったのですが、スマートフォンでは効かない属性がありました。

autoplayはiOSで効かない。
(Androidでもバージョンによって効かないものがある。)

スマートフォン向けのブラウザでは、audio要素の自動再生が効きません。iOSでは完全にダメで、Androidはバージョンによってうまく行くものもあるようですが、ほぼ効かないと考えた方が良さそうです。
iOSもAndroidも、タッチイベントなどユーザーのアクションによって再生を開始させるしかありません。
こちらのサイトによれば、

iOS の Safari では、ユーザーが携帯網で重量課金されるかもしれないから、preload と autoplay は効かないよ。ユーザーが何かアクションしないと、JavaScript での play() や load() もダメ。つまり、再生ボタンを押して play() を呼べるけど、onload で play() しても無効だから。
iOS_Android で HTML5 の audio_video を任意のタイミングで再生する方法 – webとかmacとかやってみようか R

ということのようです。確かに、ユーザー側にしてみればモバイル環境でいきなり大容量の通信をされたらたまったものではないですね。
スマートフォン向けには再生ボタンなどを置いて、タッチしたタイミングで再生されるようにするのが良いようです。

preload属性もスマートフォンで効かない

上記の引用にもあるように、iOSでもAndroidでもpreloadができないようです。ページ読み込み時にロードしておくことができず、autoplay属性と同様にタッチイベントなどのタイミングでロードさせるしかありません。
音声と同時にアニメーションが動く場合は、タイミングがずれないように、音声データのロード完了を待ってから再生を開始するのが無難です。

loop属性もAndroidで効かない

loop属性はiOSではうまくいきましたが、Androidでは効かないものもあるようです。私の2012年モデルのNexus7/Chromeでは効きませんでした。
回避方法としては、endedイベントを取得して、再生が終わったら再度playさせるという方法があります。
参考:javascript – HTML 5 Audio Looping – Stack Overflow

JavaScriptでAudio要素を扱う

タッチで再生させたり、イベントを取得するにはJavaScriptを使います。
参考:無職のプログラミング HTML5 Audio オブジェクトを JavaScript で制御する方法

1. Audioオブジェクトを作る
var audio = new Audio('sound.mp3');
引数にオーディオファイルのパスを設定することができます。

2. 属性値を設定する
audio.loop = 'true';

3. オーディオをロードする
audio.load();

4. Audioの再生可能イベントを取得する
オーディオファイルのロードが完了し、再生可能になるとcanplaythroughイベントが発生します。

5. Audioの終了イベントを取得する
オーディオの再生が終了するとendedイベントが発生します。

6. playメソッドを実行
audio.play();

jQueryを使って書く場合、以下のような感じになります。

$('#play').bind('touchstart', function() {
	var audio = new Audio('sound.mp3');
	audio.load();

	audio.addEventListener('canplaythrough', function() {
		audio.play();
		//同時に動かしたいアニメーションの処理
		$('#keyvisual').fadeIn(2000);
	}, false);

	audio.addEventListener("ended", function() {
		audio.play();
	}, false);
});

IE8以下でも音声を再生する

IE8以下ではaudioタグに対応していません。
IE8以下でも音声を鳴らしたい場合は、mp3を再生させるFlashを作り、audioタグの中に置いておくと良いでしょう。

読み込むオーディオファイルが多い時

読み込むオーディオファイルが多い時、preload=”auto”にしていると、IE9でページが重くなる現象が起きました。preloadはnoneに設定していたほうが無難です。

IE9ではAudioオブジェクトの作成がうまくいかないことがある

JavaScriptで Audioオブジェクトを作成した時に、IE9でうまくいかないことがありました。いつも、というわけではなく、うまくいく場合もあります。謎です。
うまくいかない場合は、HTMLのaudio要素に対してplayメソッドを実行すると良いようです。
参考:ケンタテクブロ IE9 の HTML5 Audio について

var audio = document.getElementById('sound');
audio.load();
audio.play();

ページの上部へ

ブラウザチェックのできるWEBサービス「Sauce Labs」を試してみた

このブログをWordpressに移転した際に、ブラウザチェックをやっておこうと思ってAdobe BrowserLabにアクセスしたところ、なんと3月13日付けでサービスを終了していました。
普段はブラウザチェックは自分のPCでやっているのですが、ブラウザチェックって、いくつもブラウザを開いたり、Macを立ち上げたりするのが結構面倒なんですよね。ブラウザがバージョンアップされるたびに環境を整えなくてはいけないですし。Adobe BrowserLabはブラウザ上から、複数のブラウザでの見た目を簡単にチェックできるので、ちょっとだけ確認したい、というようなときにはよく利用していました。

現在、Adobe BrowserLabのページにはサービス終了のお知らせが掲載されています。
http://blogs.adobe.com/browserlab/2013/03/13/browserlab-is-shutting-down-on-march-13-2013/
これからはモバイル環境での動作チェックのほうがより重要になっていくので、そちらのほうにリソースを傾けるということみたいです。すでにAdobe Edge Inspectというモバイル環境でのチェックツールがリリースされていますが、これからはそちらのほうに注力していくのでしょうね。

Adobe BrowserLabのサービス終了に伴って、BrowserStackまたはSauce Labsへの移行が案内されています。Sauce Labsでは現在キャンペーン期間中で、Adobe BrowserLabからSauce Labsへ移行すると10時間分のフリーテスト時間がもらえます。キャンペーン期間は3月13日から30日間ということなので、もう数日でキャンペーンは終わってしまいますので、登録される方は今登録しておいたほうが良いですね。

私もせっかくなのでSauce Labsに登録して、ちょっとだけ使ってみました。

続きを読む

ページの上部へ