用javascript播放音频

Question

我正在尝试播放一分钟后，用户已经来到我的网页上的蜂鸣音。我在这里找到了解决方案，https://stackoverflow.com/a/18628124/912359

这是我的密码：

$(document).ready(function(){
    setTimeout(function () {
        try{
            if(!$(".facebook-chat").hasClass("active")){
                $(".facebook-chat").addClass("active");
                var audio = new Audio("/sound/chat.mp3");
                audio.play();
            }
        }catch(e){

        }
    }, 60000);
}):

这会引发异常：

默默无闻的(承诺) DOMException

奇怪的是，一旦我在浏览器中单独加载声音文件并返回到页面，它就完美地工作了。有什么办法能修好它吗。

编辑问题是用户必须与浏览器交互才能播放声音。所以我把相同的代码放在点击事件下，它就能工作了。但在滚动事件上也不起作用。我想chrome并不认为滚动是用户交互。有人能添加什么其他交互可以用来触发这一点吗？

另外，如果我将音频文件加载到一个单独的窗口并返回到我的页面，它是如何工作的。

Answer 1

您可以尝试在文档准备好时加载音频，然后只在加载了资源时才播放它(对于此检查，您可以在onloadeddata上注册一个回调)。否则，如果没有加载资源，则可以再次加载它。

​

$(document).ready(function()
{
    let aud = new Audio('https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3');
    let canPlay = false;

    aud.onloadeddata = () => (console.log("audio loaded"), canPlay = true);

    setInterval(function()
    {
       if (canPlay)
           aud.play();
       else
           aud = new Audio('https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3');
    }, 3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

​

Answer 2

当我尝试同样的方法时，我能想到的最好的解决方案是：

const playPromise = audio.play();
if (playPromise !== null){
    playPromise.catch(function() { audio.play(); })
}

但是有时(十分之一)第二个audio.play()也没有播放，声音也没有播放。我建议你做一个循环，只有在承诺终于实现的时候才停止。