Audioオブジェクトで音声ファイルを遅延させて再生する

今回やりたいこと

• タッチ後に音声の再生
• 複数の音声を遅延させて再生

問題

iOSのブラウザで複数の音声ファイルを任意のタイミングで、
再生しようとしたけど再生できない。

というわけで、タップした時に音声ファイルを遅延して再生するということで、
ファイルロード時にAudioオブジェクトを生成し、setTimeoutで遅延させてから
play()メソッドで再生すればいいだろうと安易な考えをしていました。

問題のソースコード

var play = document.getElementById('play');
var audio = {
    select: new Audio("./mp3/select.mp3"),
    atari: new Audio("./mp3/atari.mp3"),
    hazure: new Audio("./mp3/hazure.mp3")
};

// 自動再生をオフ
for(var key in audio){
    if(audio.hasOwnProperty(key)) {
        audio[key].autoplay = false;
    }
}

// 再生ボタンの処理
play.addEventListener('click', function(){
    // select.mp3 再生
    audio[select].load();
    audio[select].play();

    setTimeout(function(){
        // atari.mp3 再生
        audio[atari].load();
        audio[atari].play();
    }, 1000);
}, false);

PCブラウザで確認し、mp3ファイルが再生していることが確認できた。。。

準備は整った!
ということで、iPadで再生!!!

俺氏「(再生…!!!!)」

iPad「・・・」

俺氏「」

俺氏「進捗ダメです(ﾎﾞｿｯ」

select.mp3は無事再生されましたが、
atari.mp3が再生されなかった・・・。

なんだかんだ調べた結果、 こちらによると
ユーザーが知らない間に重量課金されるかもしれないので、
preloadとautoplayは効きません。ユーザーイベントがないと、
JavaScriptでのplay()やload()も発火しません。
なので、touchendやclickイベントの直後ならplay()を呼べますが、
ファイルロード時はplay()メソッドは発火しませんよ。

解決策

// 再生ボタン クリックの処理
play.addEventListener('click', function(){
    // select.mp3 再生
    audio[select].load();
    audio[select].play();

    // atari.mp3 再生
    audio[atari].load();
    setTimeout(function(){
        audio[atari].play();
    }, 1000);
}, false);

結論

setTimeoutの前に、再生したいAudioオブジェクトを
load()しておけばいいみたいです。

スマホ用のwebアプリなんかを作るときにひっかかりそうなので、
よかったら試してみてはいかがでしょうか。