スマホ( iOS / Android )でブラウザをバックグラウンドにしたり、他のページを開いた時のイベントを取得する方法

音を流した時に、流しっぱなしになってしまってホームボタンを押して、バックグラウンドで音楽が鳴り続けてしまったので、そのイベントを取得する方法を検索しました。

この記事は、おもいっきり
ホームボタンを押してSafariを裏にまわしたときにAudioを停止する
を参考にしてる、これを見てのメモです。ええ。

でiOSに関しては

A

document.addEventListener("visibilitychange", function() {
        if ( doc.hidden ) {
            //はなれた
        }else{
　　　　　　//あらわれた
        }
}, false);

をすると、ページが後ろに下がる時は何も表示されないのに、
ページが前に表示される時に、[はなれた]→[あらわれた]が発生する。

ただ、アンドロイドだとこの方法でうまくいくっぽい。

そして、

B

window.addEventListener("blur", function() {
        //はなれた
}, false);

みたいな事で、iOSの方でホームボタン押したり、新規ページ開いたりが取得できる。アンドロイドだと、若干過反応というか、URLを入力しようとするだけで、反応しちゃう。ので、

androidはBに反応しないようにiOSはAのはなれたに反応しないようにしつつ、
実装をすれば、ブラウザから離脱した時に音楽を消すとか、そういうのができます。

案外誰も書いてない。結構知りたいないようだったので、メモだけど、書いた。