Question

当用户收到消息并且用户不在选项卡中时，我使用以下代码播放声音意味着当前选项卡是INACTIVE或用户在当前选项卡之外。

$(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 isactive = false;

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

onNotificaitonComes = playSound;

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

Answer 2

我想象的是：

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

当用户/标签/浏览器处于非活动状态时，JavaScript播放声音

2 个答案: