在没有用户交互jquery的情况下播放音频答案

【问题标题】：play audio without user interact jquery在没有用户交互jquery的情况下播放音频
【发布时间】：2020-03-17 20:14:17
【问题描述】：

我正在构建一个仪表板，用户可以在其中收到新订单的通知（通过声音），所以我希望在不让用户单击任何按钮的情况下播放音频
注意到这个问题： “play() 失败，因为用户没有先与文档交互”。
尝试了这些帖子的答案，但没有一个解决了同样的问题
link1
link2
link3
link4
link5

我的谷歌 Chrome 版本 80.0.3987.132（官方版本）（64 位）

代码：

HTML

<div><audio src="../audio/message.mp3" id="mainaudio"></audio>
<button id="btn" hidden> clicked automatically</button></div>

jQuery

$('#btn').click(function(){document.getElementById("mainaudio").play();});
setInterval(function(){

var oldreq=$("[name='show-order[]'] span").html();
var oldsugg=$("[name='show-sugg[]'] span ").html();

$.ajax({
        url:"../include/uid.php",
        type:"post",
        data:"method=reloadNav&oldOrder="+oldreq+"&oldSug="+oldsugg,
        success:function(data){
            var js=$.parseJSON(data);
            if(js.notify == 1){
                $("#btn").click();
            }
            $("[name='show-order[]'] span").html(js.order);
            $("[name='show-sugg[]'] span").html(js.sug) ;  
        },
        error:function(){
            alert("ajax error");
        }
    })


},5000);

【问题讨论】：

你找到解决方案了吗@Ruaa Elias？
没有@KnowledgeSeeker

标签： jquery ajax audio

【解决方案1】：

加载页面几秒后即可开始播放音乐

$(window).on( "click", function() { //prevent 'no interact error'
    setTimeout(function() { // start play after 5 sec
        var el = document.getElementById("mainaudio");
        if(el.paused){ //check if music dont play now
            el.play();
        }
        else{
            console.log('already playing!');
        }
    }, 5000);
});

【讨论】：