ホームボタンを押してSafariを裏にまわしたときにAudioを停止する

audioタグをつかってAudioを再生した場合、別タブを開いたりSafariを閉じたりしてもAudioはバックグラウンドで再生し続けてしまいます。今回はこの対策を3つ考えました。

DEMO（未対策なAudioタグ）

※ iPhoneでご観覧ください

対策A: blurイベントでaudioをpauseする

JavaScript

(function(win, doc) {
    
    "use strict";
    
    var audio = doc.getElementById("audio");
    
    doc.addEventListener("click", function() {
        audio.play();
    }, false);
    
    win.addEventListener("blur", function() {
        audio.pause();
    }, false);
    
})(this, document);

DEMO

※ iPhoneでご観覧ください
これで音が出ているページを離れたときに止めることができます。

対策B: Page Visibility APIをつかう

(function(win, doc) {
    
    "use strict";

    doc.addEventListener("click", function() {
        audio.play();
    }, false);

    doc.addEventListener("visibilitychange", function() {
        if ( doc.hidden ) {
            audio.pause();
        }
    }, false);

})(this, document);

DEMO

※ iPhoneでご観覧ください
これでも音が出ているページを離れたときに止めることができます。

対策C: Web Audio API をつかう

JavaScript

(function(win, doc) {
    
    "use strict";
    
    try {
        (function() {
            var ctx, gain, source, buffer, request;
            
            win.AudioContext = win.AudioContext || win.webkitAudioContext;
            ctx = new AudioContext();
            
            request = new XMLHttpRequest();
            request.open("GET", "http://jsrun.it/assets/5/1/t/k/51tkl.mp3", true);
            request.responseType = "arraybuffer";
            
            request.onload = function () {
                doc.addEventListener("click", function() {
                    source = ctx.createBufferSource();
                    gain   = ctx.createGainNode();
                    
                    // オーディオをデコード
                    ctx.decodeAudioData(request.response, function (evt) {
                        source.buffer = evt;
                            source.connect(gain);
                            gain.connect(ctx.destination);
                            source.loop = true;
                            source.noteOn(0);
                    });
                }, false);
            };
            
            request.send();
            
        })();
    } catch(e) {

    }
    
})(this, document);