浏览器选项卡处于非活动状态时播放声音通知

Question

动机：假设我有一个市场。假设用户发布了广告/海报并前往其他网站阅读或观看内容。尽管如此，他还是希望收到合理的通知，以答复潜在买家/申请人并返回其他职责。早期实现此功能很容易。尽管如此，我还是没能在 2024 年找到可行的解决方案。

我检查了现有答案，似乎它们在 2024 年不起作用。

• 从非活动浏览器选项卡播放声音
• 使用 JavaScript 在非活动选项卡中播放音频

这是由于：

• https://developer.chrome.com/blog/autoplay/
• https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

在现代浏览器中，默认情况下禁用自动播放，因此您无法执行

new Audio(src).play()

。我进行了很多尝试，但没有找到可靠的方法来播放声音通知。在其他现代网站中，似乎有 30-50% 的情况缺少声音通知。

问题：是否可以从非活动浏览器选项卡或浏览器最小化时播放声音通知？如果是 - 那么实现这一目标的最简单方法是什么？

Answer 1

您无法在最近的浏览器中自动播放音频。您需要与文档进行用户交互。如果您确定用户在“离开”之前会单击或滚动文档，那么您可以使用事件侦听器来暂停音频。然后当浏览器处于非活动状态时，您可以再次播放。您可以使用事件 'visibilitychange'。

let audio = document.getElementById('myAudio');
let clicked = false

document.addEventListener('click',()=>{
    audio.pause()
    clicked = true
})
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        console.log('Browser is inactive');
        if(clicked) setTimeout(()=>{
            audio.play()
        },10000);
    } else {
        console.log('Browser is active');

    }

})

<audio id="myAudio" src="./sound/sound.mp3"></audio>