当前位置: 首页 > Web前端 > HTML5

微信h5页面的audio标签在ios下无法自动播放

时间:2023-04-06 00:20:34 HTML5

后台介绍:在一个h5页面中,当用户向后台提交表单时,如果后台返回的结果成功,就会开始自动播放背景音乐。问题:安卓手机正常,iOS无反应。后来上网查了一下,才知道是因为iOS不允许自动播放音乐,除非用户做了交互行为的解决方案:1.如果需要在页面刚加载的时候自动播放音频,比较容易处理,可以使用微信提供的api来实现(应该是内部做了一些修改)//通过config接口注入权限验证配置后,在readyfunctionautoPlayAudio1()中播放音频autoPlayAudio1(){wx.config({//配置信息,即使不正确,也可以使用wx.readydebug:false,appId:'',timestamp:1,nonceStr:'',signature:'',jsApiList:[]});wx.ready(function(){document.getElementById('bgmusic').play();});}参考:iOS微信浏览器自动播放HTML5音频(音乐)的正确方法2.背景音乐需要在特定时间播放。在html中添加touchstart事件,在回调函数中播放。需要注意的是这里不能用jquerytrigger来触发,只有得到真正的用户交互后才会响应,因为只需要一次触摸,所以可以使用one方法注册事件audio.play();//安卓手机可以直接播放//兼容iOS,为了保险起见,在他身上添加了触摸事件if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){varnoPlay=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下背景音乐无法自动播放的问题解决音频在H5下无法自动播放的问题iOS