audio 标签设置 autoplay 后，正常情况下页面就可以自动播放音频，但是测试后发现电脑端是可以正常自动播放的的，但是一到手机端就不行了。

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()
})

参考资料：

https://www.jianshu.com/p/c3c6944eed5a