HTML5ではaudio要素が追加され、外部プラグインを使わずブラウザで音を扱えるようになりました。そこで、デモを作ろうとしたのですが、ハマったポイントがいくつかあったので紹介します。検証環境はPC：Safari5.0.5(WIN)、iPhone：iOS4.3.2のMobile Safariです。
loop属性が効かない
audio要素ではloop属性を付けることで、繰り返し再生が可能です。PCでは動作しますが、iPhoneではこれがうまく動作せず、1回再生されて停止してしまいました。onendedを使い、最後まで再生したらもう一度再生させれば対処できます。
＜audio src=”audio.mp3″ preload=”auto” onended=”this.play()” ＞＜/audio＞
ユーザのアクションをトリガーにしてしか読み込み、再生できない
iPhoneでは従量課金の可能性があるのでautoplay, autobuffer属性は無効になっていますので、代わりにWebページ読み込み時（onload）のタイミングでプリロードや再生ができるか試してみました。これも、PCでは動作しますが、iPhoneでは動作しません。iPhoneでは、ユーザのアクションがトリガーになるようなものでないとロードが開始されないようです。
同時に１音しか鳴らせない
２音を同時再生できるか検証してみました。PCでは１音を再生させた後、２音目を再生させると同時に再生されますが、iPhoneでは前の音が強制的に停止してから次の音が再生されます。iPhoneでは同時に１音しか鳴らせないようです。
読み込みの状態を知りたい場合は、canplayイベントで
loadはデータ全体の読み込みが完了したというイベント、canplayは再生が可能になったというイベントですが、iPhoneではloadイベントが発生していないようでした。プリロードなど、読み込みの状態を知りたい処理はcanplayイベントを使うのが良さそうです。
function loadAud(){
var aud = document.getElementById(‘elementId’);
aud.addEventListener(‘canplay’, function(){
// なにかしらの処理
}, true);
aud.load();
}
load()しなくてもplay()できる
データを読み込むload()メソッドと、再生を行うplay()メソッドがありますが、load()させなくてもplay()のみで再生可能です。ただし、PC版ではplay()のみの場合はcanplayイベントが発生していないようでした。iPhoneでは発生しているようなので、そのタイミングで処理を書くことが可能です。
複数プリロードしておこうとすると１音しか鳴らないことがある
初回再生の際の遅延を無くすため、スタートボタン等のクリック時に複数の素材をあらかじめload()しておき、後で個別再生させるということが考えられますが、これもPCでは意図通りに動くものの、iPhoneでは１音しか鳴らなくなるようでした。１音だけload()している場合は、遅延が無くなり意図通りに動きます。