Html5-audio手机端不自动播放问题

今天接到个H5活动需求，需要一进页面就播放音频效果在电脑端试了是可以的，但是一到手机端就不行了

1、audio:html5音频标签

<audio id="audios" src="https://dn-qtshe.qbox.me/LAMPHO%20-%20%E7%9F%AD%E5%8F%91.mp3" autoplay controls="controls">您的浏览器不支持 audio 标签。</audio>

不支持audio元素的浏览器会显示标签内文字

src:音频地址

autoplay:音频加载完毕后自动播放。

controls:显示播放控制条。

loop:播放完毕后会重复播放。

preload: auto 预加载音频视频。metadata 只预加载音频视频元数据。 有autoplay时此属性无效。

2、js控制媒体

play()播放

pause()暂停

load()重新加载

3、微信端和手机不能支持自动播放问题

原因是：android ios 内部原因 为了节省流量，规定不自动播放音频视频

所以采用以下方式解决

//--创建页面监听，等待微信端页面加载完毕 触发音频播放
    document.addEventListener('WeixinJSBridgeReady', function() {
        document.getElementById('audios').play()
    })

//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
    document.addEventListener('touchstart', function() {
        document.getElementById('audios').play()
    })

青团社招聘：

招聘岗位：高级前端开发工程师P5及以上
坐标杭州市余杭区文一西路1380号金之源大厦11层

简历投递到：hr@qtshe.com || haochen@qtshe.com

职位描述：

1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量

2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案

3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界