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();

ページの上部へ

電子書籍を読んでみて気付いたメリット・デメリット

最近、仕事で電子書籍の制作を受注してepubフォーマットの電子書籍を作っています。電子書籍制作者としてはまだまだヒヨッコなのですが、ぼちぼちやっております。

電子書籍の仕事を始めるにあたって、制作側として少しでも「電子書籍を読む」という実感を掴もうと、自分でも電子書籍を買って読み始めました。はじめは「仕事に必要だから」という義務感から買っていた電子書籍ですが、実際に電子で読んでいるうちに、紙の本にはないメリット・デメリットがあることにも気付きはじめました。

今回はいち読者の立場から、電子書籍の「いいとこ」「わるいとこ」をつらつら書いてみたいと思います。

どんな環境で読んでいるか

利用しているストアは、メインでAmazonのKindle、時々hontoです。
リーダーはKindle Paperwhite(2012)、iPad mini(2012)、iPhone 5Sを場合に応じて使い分けています。一番読みやすいのはPaperwhiteかな。軽いし片手で持てるのと、画面が反射しないのがいいですね。
iPadは、カラーの本や固定レイアウトのIT書、マンガを読むときに使います。iPhoneは画面が小さいので、マンガとか固定レイアウトの本を読むには辛いですが、外出時にさっと取り出せて読めるのは良いです。

メリット1:場所を取らない

圧倒的に省スペース。そして蔵書を探しやすい。
大きな本棚をお持ちの方なら良いんでしょうが、私は部屋に収納があまりないので、収納スペースはいつも悩みの種です。結局押入れに詰め込んだりしてるんですが、そうすると本をどこにしまったか分からなくなり、探すにも一苦労。
電子書籍ならスペースも取らないし、電子書籍リーダーを開けばすぐに目的の本が見つかります。私のような「片付けられない人」にはこれが一番のメリットではないでしょうか。

メリット2:手で本を押さえておく必要がない

紙の本だと、常に手でページを押さえて開いておく必要があります。でも電子書籍ならページを押さえる必要がありません。スタンドを使えば完全に手が空きます。本を読みながら作業したり、寝っ転がって読む時にはとても快適かつ効率的です。いつも下の画像みたいに、スタンドにiPadを立てて読んでいます。
20140706-163501.jpg

メリット3:すぐ買える

続きが気になる小説もマンガも、本屋に行かなくてもすぐ買えます。品切れもありません。
ただ、あまりにも手軽に買えるので、ついつい無駄に買いすぎてしまいます。

メリット4:紙の本より安い

大体の電子書籍は紙版よりも数十円~数百円安くなっています。それだけでもちょっとオトク感がありますが、Kindleストアではセールもよくやっています。hontoもしょっちゅうクーポンを送ってきます。紙の本では(再販制度があるので)割引はまずないことを考えると、安く買えるチャンスが多いのはありがたいです。

デメリット1:本の「所有権」がない

ストアが取り扱いを終了したり、ストア自体が閉店してしまうと、買った本はもう二度と読めません。
これは本を大事にする人には大きなデメリットになると思います。
私は本は割とすぐに処分してしまうタイプなのであまり気にしていませんが、長く大事にしたい本は紙で買った方が良いです。

デメリット2:電子書籍では全巻出てない本がある

マンガなど続きものの本で、全巻電子書籍化されていない場合があります。また、発売日が紙の本よりだいぶ遅れることも。
人気作品なら紙の本と同時に電子版が発売されていることもあるので、電子版を買う際には事前にチェックしておくと良いと思います。

デメリット3:文字が小さくて読みづらいことがある

リフローの本であれば文字サイズは好きに変更できるのですが、固定レイアウトの本は文字サイズを変更できません。ピンチアウトすれば画面が拡大されますが、画面の一部がズームされるだけなので長い文章を読むには適しません。

結論:まだ完全に電子書籍にシフトはできない、でも快適なのは事実

デメリットを考えると「完全に電子書籍にシフト」とはいかないのが残念ですが、読書スタイルによっては電子書籍は本当に読書環境を快適にしてくれます。本をたくさん買う人や、分厚い本をよく読む人には特におすすめ。

制作する立場として

上記は読者の立場から見たメリット・デメリットですが、制作する立場としてもいろいろ思うところがあります。
epubは中身はHTMLやCSSなので、Webの知識があれば作れてしまいそうに見えます。でも、RS(リーディングシステム)の挙動がとにかくバラバラで、さらにWebとの微妙な仕様の違いもあり、少しでも凝ったレイアウトを作ろうとすると苦労します。
Kindleストアひとつとっても、Paperwhite、KindleFire、アプリ版はiOS・Androidアプリがあり、それぞれ挙動が違うのです。多数のストアに出そうと思えば、チェックだけでものすごい時間と手間がかかります。

それにしても、現在電子書籍の開発に携わってる人ってどんな方たちなのでしょうか。DTPな人なのか、WEBな人なのか? あんまり業界の人と交流しないんで分かりません。だれかおともだちになってください。

ページの上部へ

iPhone3GSを下取りに出しました

そろそろiPhone5Sが発表されそうですね。今はiPhone4Sを使っているのですが、早く新しい機種にしたくてわくわくしてます。
4Sの前に使っていた3GSも、そのうち使うかもと思って保管しておいたのですが、5Sが発売される前に、少しでも高く売れるうちに3GSを売ってしまうことにしました。

実はiPhoneを買取りに出すのは、といいますか、電化製品を売ること自体が始めてです。いくら位で売れるものなのか、まずは下調べ。
「iPhone 買取り」で検索すると、価格コムの買取がひっかかりました。買取上限価格は4620円。これは本体にキズなどがなく、付属品がすべて揃っている状態での価格のようです。
悪い金額ではないのですが、郵送での買取は面倒なので、できれば店頭での買取にしたいところ。

さらに調べていくと、店頭での買取はソフマップかじゃんぱらがよいという情報を得ました。価格を調べてみると、ソフマップは1000円、じゃんぱらは8000円。なんでこんなに価格が違うのかは謎ですが、1000円だとさすがに往復の交通費で消えてしまうので、今回はじゃんぱらに売りに行くことに決定。

早速、初期化したiPhone3GSを携えて、じゃんぱら新橋店に行ってきました。
新橋店は地下鉄の駅をでてすぐ、マクドナルドの隣のビルの2Fです。平日だったからか待ち時間もほぼなく買取り完了しました。
私の3GSは箱も付属品も揃っていましたが、カバーをつけない裸族主義なので結構細かいキズがついていました。スタッフの方が言うには水濡れのあともあったそうで、2400円引かれて5600円の値がつきました。
引かれてもこの値段ならまあ満足です。

janpara

初のiPhone買取は無事終了。はじめてのおつかいを終えた気分です。

ページの上部へ

スマートフォン対応しました

このブログをスマートフォンに対応させました。
移転するときに対応させたかったんだけど、時間がなかなかとれなくてここまで放置してしまいました。

レスポンシブです。個人的に、レスポンシブにいろいろと疑問も感じてはいるんですが、Wordpressでスマートフォン対応するにはレスポンシブが一番かんたんのような気がします。

まだ不完全なところも多いので、気づいたらちょこちょこ直します。

ページの上部へ

Adobe Digital Publishing Forum 2013に参加してきました

東京・汐留のコンラッド東京で行われた、Adobe Digital Publishing Forum 2013に参加してきました。
Adobeの電子書籍開発ソフト、Adobe Digital Publishing Suite(ADPS)の国内での活用事例がいくつか紹介されましたが、やはり東京書籍のデジタル教科書のできばえはすごいですね。「そうそう、こういう本を電子書籍で読みたかったんだよ」という機能にあふれています。
化学の教科書では、実験の映像が埋め込まれていたり、画像やグラフにインタラクティブなしかけが埋め込まれていたりと、電子書籍のおもしろさを感じることができる内容でした。
このデジタル教科書はApp Storeで買えるようですが、4000円以上するので、購入はまじめに勉強したくなったときに、ということで・・・。

新編化学基礎(App Store)

https://itunes.apple.com/jp/app/xin-bian-hua-xue-ji-chu/id597799298?mt=8

IT mediaにも記事が掲載されてます。
進化した教科書――HTML5で表現された豊富な映像資料が学びを深める

ADPSで電子書籍を作るとき、InDesignで作れるのは良いのですが、実際に開発していくとなるとDTPの知識だけでは作れなさそうだな、とも思います。ADPSで電子出版している出版社はどういうワークフローで作っているんでしょうか。

ADPS、試してみたいんだけど、Creative Cloudに入らないといけないのがなあ。私、まだCS5でがんばりたいんです。

続きを読む

ページの上部へ

Yahoo!ブックマークがサービス終了

Yahoo!によるオンラインブックマークサービス、Yahoo!ブックマークがサービスを終了するそうです。

Yahoo!ブックマークをご利用のお客様へ大切なお知らせ
Yahoo!ブックマークは、2013年7月17日(水)をもちましてサービスを終了させていただくことになりました。
サービス終了に先立ち、6月26日(水)よりブックマークの登録や編集、削除ができなくなります。
Myブックマークに登録されているページのデータは、7月17日(水)より順次Yahoo!ボックスへ移行させていただきます。どうぞご了承ください。
http://bookmarks.yahoo.co.jp/info

Yahoo!ブックマークにはエクスポートの機能がなかったようなのですが、2013/4/17からエクスポート機能が提供開始され、ブラウザのブックマークやはてなブックマークへ、ブックマークを移行できるようになります。
私はYahoo!ブックマークを使っていないので、今回は影響を受けませんが、ソーシャルブックマークとしてははてなブックマークを利用していて、もはやブラウザのブックマークよりもはてブのほうが活用頻度が高いくらいです。ブックマークを完全にオンラインのサービスに頼りきっている身としては、Yahoo!ブックマークの終了もなんとなく「他人事ではないな」と感じてしまいます。はてなブックマークはソーシャルブックマークとしては国内で最大のサービスだと思いますが、TwitterやFacebookなどの流行でソーシャルブックマークの存在感がかすんできているように感じられる現在としては、はてブもいつまで続いてくれるか・・・。とにかく「なくならないでね」と祈るしかないのですが。

ページの上部へ

ブラウザチェックのできる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に登録して、ちょっとだけ使ってみました。

続きを読む

ページの上部へ

移転しました。

2年くらいブログを放置していたのですが、ぼちぼち再開します。
今までははてなダイアリーで書いていたのですが、カスタマイズしにくい部分が気になっていたので、思い切ってドメインを取ってWordpressで作ってみました。

ブログを放置している間に、会社を退職してフリーランスになったり、Macユーザーになったりといろいろと環境も変わりました。
仕事としては依然としてWEB界隈におりまして、あとちょっとだけ電子書籍に足をつっこんだりとかしています。
このブログでは、仕事のことに限らず思ったことを書けたらいいかなと考えてます。あとせっかくブログのタイトルがタイトルなので、本のレビューなんかも書きたいな。まあ「読んだ端から忘れる」タイプの人間なので、うまく書けるかはわかりませんが、のんびりとやっていきます。

ページの上部へ