jquery - 在没有用户交互 jquery 的情况下播放音频
问题描述
我正在构建一个仪表板,用户在其中收到新订单通知(通过声音),所以我希望在不让用户单击任何按钮的情况下播放音频
注意到这个问题:“播放()失败,因为用户没有与文档交互第一的” 。
尝试了这些帖子的答案,但没有一个解决了同样的问题
链接1
链接2链接3
链接
4链接
5
我的谷歌 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);
解决方案
您可以在加载页面几秒钟后开始播放音乐
$(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);
});
推荐阅读
- laravel - Laravel:将数据从一页发送到第二到第三页以在数据库中提交
- html - 如何使用具有属性的 Mat-Select [已选择]
- java - 针对 XSD 的 XML 验证:cvc-complex-type.2.4.a
- java - 以编程方式在 PDF 图片字段中添加的图片未显示
- c# - 使用整数索引进行数组表查找的最快方法是什么?
- python-sphinx - 如何在 Sphinx 的 html 输出中随处包含源代码行号?
- android - Android Emulator 29.2.0 更新上未显示多显示器选项
- git - 在 Git 中,delta 是什么意思?
- php - 在基于 Web 的手风琴设备中插入内容会停止工作
- docker - Docker容器文件系统访问