HTML5のAudio要素を使い、再生する音を遅延無く切り替える方法を、先週8/20（土）に開催された「第5回おばかアプリ選手権」で紹介しましたアプリ、iBooNを例に紹介したいと思います。
iBooNの仕組み
iBooNは、Mobile Safari上で動作するWEBアプリです。Mobile Safariから加速度を取得（iOS4.2から加速度センサーに対応）し、前後のシェイクジェスチャ（ぶーんと走らせる動き）、左右の傾き（ドリフト）に応じて異なる車の音を再生させています。
当初は複数のAudioファイルをプリロードさせ、ユーザのアクションに応じて各ファイルを再生させる予定でしたが、Mobile Safariでは複数のAudioファイルをプリロードして保持しておくことが難しく、１音しかプリロードされた状態で鳴らなかったり（参照：iPhoneでHTML5のaudio要素を使うときに気をつけたいこと）、ユーザのアクションごとにAudioデータのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。
ポイント
解決のポイントは以下の３つです。
(１)素材のAudioファイルは１つにまとめる
(２)初回のみユーザアクションでプリロードしておく
(３)再生位置を変更、部分的にループさせる
（１）素材のAudioファイルは１つにまとめる
複数のAudioをタイミングよく鳴らすために、素材のAudioファイルを１ファイルとして繋ぎ、currentTimeプロパティで再生位置を指定することによって複数の音を再生させました。
（２）初回のみユーザアクションでプリロードする
iPhoneではユーザのアクションをトリガーにしてしか読み込みができません。初回のみ何かしらのボタンを押してもらい、Audio要素をプリロードします。今回は「standby」ボタンにしましたが、アプリの「起動」ボタンのように違和感を感じさせない作りの方がより自然です。
canplayイベントを監視し、再生が可能になれば「準備完了」のアラートを出しています。これで再生可能な状態になるので、好きな車を選択し、遊ぶことが可能です。今回は15秒ほどのmp3ファイルでしたが、容量が重いファイルですと、ユーザを待たせてしまう可能性があるので注意が必要です。
（３）再生位置を変更、部分的にループさせる
目的の再生範囲を超えた場合、各音の先頭に再生位置を戻すことによってループを実現しています。