OliverLau 2019-06-26
背景介绍:在一个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 一起讨论啊:)
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q
示例一和示例二 参考尚硅谷老师的视频教程;window.AudioContext){alert("当前浏览器不支持哟!DOCTYPE html><html><head><meta charset="U
doctype html> HTML5使用UTF-8编码演示:。<meta charset="UTF-8">2.HTML5中如何嵌入音频?</audio>3.HTML5中如何嵌入视频?</video&
<section>跟<div>类似,也是默认换行。html5form表单新增的属性。html5input:不支持的浏览器就是普通的文本输入框text. <inputtype="search"/>输入搜