时间戳

首页 > 解决方案 > 使用 javascript 播放音频

javascript - 使用 javascript 播放音频

问题描述

我试图在用户进入我的网站页面后一分钟播放哔声。我在这里找到了解决方案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 不考虑滚动用户交互。任何人都可以添加可以用来触发此的其他交互吗？

此外，如果我在单独的窗口中加载音频文件并返回我的页面，它是如何工作的。

标签： javascript

解决方案

您可以在文档准备好时尝试加载音频，然后仅在加载资源后才播放（对于此检查，您可以在 上注册回调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>

推荐阅读