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