当用户/选项卡/浏览器处于非活动状态时 JavaScript 播放声音答案

【问题标题】：JavaScript play sound when user/tab/browser is inactive当用户/选项卡/浏览器处于非活动状态时 JavaScript 播放声音
【发布时间】：2016-02-19 21:37:58
【问题描述】：

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

$(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 上进行了搜索，但找不到任何答案！

帮帮我！

【问题讨论】：

标签： javascript jquery audio playback

【解决方案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>

【讨论】：

【解决方案2】：

我自己发现的：

当用户标签处于活动状态时，它们会禁用声音：

var isactive = false;

function playSound(){
    if (isactive) return;
    playWav...;
}

onNotificaitonComes = playSound;

$(window).focus(function(){
    isactive = true;
}).blur(function(){
    isactive = false;
});

【讨论】：