当用户/选项卡/浏览器处于非事件状态时 JavaScript 播放声音

Question

当用户收到消息并且用户不在选项卡中时，我使用以下代码来播放声音，这意味着当前选项卡处于非事件状态或用户在当前选项卡之外。

$(window).hover(function(event) {
    if (event.fromElement) {
        console.log("inactive");
    } else {
        console.log("active");
        beep("beep.wav", 1.0); //your code here
    }
});

我只想在用户离开选项卡时播放声音，而不是在用户位于选项卡内时播放声音。现在，仅当用户返回选项卡时才会播放声音。这不是我想要的。

即使用户在另一个选项卡之外，我也可以看到 facebook 和 gmail 会执行此操作，他们是如何做到的？

我搜索了SO，但找不到任何答案!

帮帮我!

Answer 1

我想象的是这样的:

var intervalHandler = null;

$(window).blur(function(e) {
  intervalHandler = window.setInterval(function() {
    document.getElementById('beep').play();
    window.clearInterval(intervalHandler);
  }, 1000);
});
$(window).focus(function(e) {
  window.clearInterval(intervalHandler);
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


<audio id="beep" src="http://www.soundjay.com/button/beep-07.wav" autostart="false" ></audio>