摘要：背景介绍在一个页面中当用户提交表单到后台后台返回的结果成功的话开始自动播放背景音乐出现的问题在安卓手机上正常中没有反应后来网上一番搜索后了解到时因为不允许自动播放音乐除非用户做出了交互行为解决方案如果是在页面刚加载就需要自动播放音频的话还是
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐
出现的问题:在安卓手机上正常,iOS中没有反应
后来网上一番搜索后了解到时因为iOS不允许自动播放音乐,除非用户做出了交互行为
解决方案:
1.如果是在页面刚加载就需要自动播放音频的话还是比较好办的,可以利用微信提供的api来实现(应该是内部做了一些修改)
// 通过config接口注入权限验证配置后, 在 ready 中 play 一下 audio
function autoPlayAudio1() {
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: "",
timestamp: 1,
nonceStr: "",
signature: "",
jsApiList: []
});
wx.ready(function() {
document.getElementById("bgmusic").play();
});
}
参考:在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式
2.需要在某个特定的时机才播放背景音乐
既然iOS做了限制,那只能通过与用户进行交互实现,利用给html添加touchstart事件在回调函数中播放就可以了,需要注意的是:
这里不能同通过jquery的trigger触发,要得到用户真实的交互才会响应,因为只需要触摸一次就可以了,所以可以用one方法注册事件
audio.play(); //安卓手机可以直接播放
// 为iOS做兼容,为了保险起见,触摸事件都给他加上
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
var noPlay = true;
$("html").one("touchstart",function(){
if(noPlay) {
audio.play();
noPlay = false;
}
})
$("html").one("touchmove",function(){
if(noPlay) {
audio.play();
noPlay = false;
}
})
$("html").one("touchend",function(){
if(noPlay) {
audio.play();
noPlay = false;
}
})
到这里背景音乐已经可以播放了,但是对于用户体验不够好,如果我不触摸页面的话还是不会播放,如果你有更好的办法,可以加我QQ:32319149 一起讨论啊:)
参考文章:H5案例分享：解决H5中背景音乐无法自动播放问题
解决iOS下音频无法自动播放
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107649.html
摘要：背景介绍在一个页面中当用户提交表单到后台后台返回的结果成功的话开始自动播放背景音乐出现的问题在安卓手机上正常中没有反应后来网上一番搜索后了解到时因为不允许自动播放音乐除非用户做出了交互行为解决方案如果是在页面刚加载就需要自动播放音频的话还是 背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反...
摘要：微信分享签名错误单页应用模式下微信分享一直提示签名错误按照微信官网文档，已经引入，正确的配置安全域名，后台开发人员生成的签名也通过微信签名工具验证，但是前端的自定义分享一直报签名错误，没有办法自定义分享，如果确保了哪些基本配置没有问题，并且 微信分享签名错误invalid signature vue单页应用history模式下微信分享一直提示签名错误invalid signature ...
阅读 634·2021-09-22 10:02
阅读 6322·2021-09-03 10:49
阅读 564·2021-09-02 09:47
阅读 2150·2019-08-30 15:53
阅读 2928·2019-08-30 15:44
阅读 899·2019-08-30 13:20
阅读 1811·2019-08-29 16:32
阅读 887·2019-08-29 12:46
