まず第一に、iOS (5.01、5.1) の Mobile Safari での HTML5 オーディオのサポートはかなり制限されています。しかし、iPad 2 の Web アプリで小さな「イベント タイプ」のサウンドを動作させることができました。アプリのサウンド ファイルは 1 つだけなので、オーディオ スプライトのトリックに頼る必要はありません (つまり、複数の MP3 を 1 つの MP3 ファイルにマージし、マージしたファイル内の再生位置を目的のサウンドに応じて変更します)。再生されます)。
お気づきのように、Mobile Safari では音声を自動的に再生することはできません。つまり、ユーザーが何らかの要素をクリックしなければなりません。技術的に言えば、クリック イベントと同じコール スタックでオーディオを再生する (ロードしない) 必要があります。ただし、Mobile Safari がオーディオ オブジェクトを作成するときに、おそらく 0.5 秒の遅延が発生します。この「問題」の解決策は次のとおりです。
- アプリの開始時 (読み込み中または初期化中) に、ユーザーがアプリ内の任意の場所をクリックまたはタップするとすぐにオーディオ ファイルの再生を開始するクリック ハンドラーを HTML ドキュメントに追加します。これにより、Safari が強制的にオーディオの読み込みを開始します。
- オーディオの再生準備が整ったときにトリガーされる「再生」イベントをリッスンし、すぐに一時停止します。
- 必要なときにオーディオの再生を (遅延なく) 再開します。
簡単な JavaScript コードを次に示します。
function initAudio() {
var audio = new Audio('./path/to/my/sound.mp3');
audio.addEventListener('play', function () {
// When the audio is ready to play, immediately pause.
audio.pause();
audio.removeEventListener('play', arguments.callee, false);
}, false);
document.addEventListener('click', function () {
// Start playing audio when the user clicks anywhere on the page,
// to force Mobile Safari to load the audio.
document.removeEventListener('click', arguments.callee, false);
audio.play();
}, false);
}