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

Posted 2023-02-25

【中文标题】当用户/选项卡/浏览器处于非活动状态时 JavaScript 播放声音

【英文标题】：JavaScript play sound when user/tab/browser is inactive

【发布时间】：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 上进行了搜索，但找不到任何答案！

帮帮我！

【参考方案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;
);