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

Posted

技术标签:

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

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

我的谷歌 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 【参考方案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);
);

【讨论】:

以上是关于在没有用户交互jquery的情况下播放音频的主要内容,如果未能解决你的问题,请参考以下文章

在没有任何用户控制或交互的情况下在 iPhone 上播放全屏视频?

当信号丢失(即没有用户交互)时如何播放画外音通知?

关于音频自动播放的问题

html <audio> 标签在 iPad 上播放之前的用户交互

有没有办法在没有用户交互的情况下发送短信?

如何在没有用户交互的情况下启动 Open Camera 应用程序来拍照?