【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点

HTML5のAudio要素を使い、再生する音を遅延無く切り替える方法を、先週8/20(土)に開催された「第5回おばかアプリ選手権」で紹介しましたアプリ、iBooNを例に紹介したいと思います。

iBooNの仕組み

iBooNは、Mobile Safari上で動作するWEBアプリです。Mobile Safariから加速度を取得(iOS4.2から加速度センサーに対応)し、前後のシェイクジェスチャ(ぶーんと走らせる動き)、左右の傾き(ドリフト)に応じて異なる車の音を再生させています。

当初は複数のAudioファイルをプリロードさせ、ユーザのアクションに応じて各ファイルを再生させる予定でしたが、Mobile Safariでは複数のAudioファイルをプリロードして保持しておくことが難しく、1音しかプリロードされた状態で鳴らなかったり(参照:iPhoneでHTML5のaudio要素を使うときに気をつけたいこと)、ユーザのアクションごとにAudioデータのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。
 

ポイント

 
解決のポイントは以下の3つです。

(1)素材のAudioファイルは1つにまとめる
(2)初回のみユーザアクションでプリロードしておく
(3)再生位置を変更、部分的にループさせる

 

(1)素材のAudioファイルは1つにまとめる

 
複数のAudioをタイミングよく鳴らすために、素材のAudioファイルを1ファイルとして繋ぎ、currentTimeプロパティで再生位置を指定することによって複数の音を再生させました。

(2)初回のみユーザアクションでプリロードする

iPhoneではユーザのアクションをトリガーにしてしか読み込みができません。初回のみ何かしらのボタンを押してもらい、Audio要素をプリロードします。今回は「standby」ボタンにしましたが、アプリの「起動」ボタンのように違和感を感じさせない作りの方がより自然です。
 
canplayイベントを監視し、再生が可能になれば「準備完了」のアラートを出しています。これで再生可能な状態になるので、好きな車を選択し、遊ぶことが可能です。今回は15秒ほどのmp3ファイルでしたが、容量が重いファイルですと、ユーザを待たせてしまう可能性があるので注意が必要です。

(3)再生位置を変更、部分的にループさせる

目的の再生範囲を超えた場合、各音の先頭に再生位置を戻すことによってループを実現しています。

Related Post

縦書きにWebフォントを使いたい!けど使えるのか検証してみた縦書きにWebフォントを使いたい!けど使えるのか検証してみた

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari(5.1.2)とMac版Safari(5.1.1)です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;      src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {      font-family:’DNPShueiMinPr5B’;}

Webフォントを使用したスマートフォン向け秀英体見本帳を公開Webフォントを使用したスマートフォン向け秀英体見本帳を公開

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の6 書体を試験的にWebフォント化し、HTML版を作成しました。推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。 Flash版はこちら>Flash見本帳HTML版はこちら>スマートフォン向け秀英体見本帳(※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。)  チャレンジしたこと Webフォントでの縦書き表現 CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題(参照:縦書きにWebフォントを使いたい!けど使えるのか検証してみた)がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。

SVGアニメーションの再生タイミングについてSVGアニメーションの再生タイミングについて

今回は前回書きました『IllustratorからSVGを書き出して、SVGアニメーションを追加する』の関連記事です。SVGアニメーションの再生タイミングにかなりハマったのでもう少し詳しくご紹介したいと思います。OPERAさんの2006年(!)の記事に、詳しい解説がありましたので、参考にしています。こうして見てみると、枯れた技術かと思われていたSVGに再び光が当たった感がありますね。  animate要素の追加  例えば、以下のようなanimate要素を追加したい場合。 <animate attributeName=”opacity” begin=”indefinite” to=”0″ dur=”0.25″ fill=”freeze”