1. 前言
很多H5的项目会用到背景音乐,虽然是很小的一个模块,但是有不少的坑。本文总结了背景音乐的常用情况的解决方案。
在进行下面内容之前,如果你并不了解Audio,可以参考之前的文章:
浅谈Audio
2. 背景音乐播放
我们用最简单的方式来播放音乐:
<!DOCTYPE html>
<html>
<body>
<audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' autoplay loop>
</audio>
</body>
</html>
或者:
<!DOCTYPE html>
<html>
<body>
<audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' loop>
</audio>
<script>
var audio = document.getElementById('audio');
audio.play();
</script>
</body>
</html>
结果,在浏览器中可以自动播放,但是在移动端的微信和safari中都无效。
原因:为了节省流量
1、大部分iOS和少部分Android的微信
2、部分Android浏览器和所有iOS系统的Safari
不支持自动播放音频视频
那么,如何解决这样的问题呢?
(1) 自动播放
[1] 微信问题
解决方案:监听WeixinJSBridgeReady
和DOMContentLoaded
事件
【微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件”WeixinJSBridgeReady”。
发现部分机型,监听DOMContentLoaded和load事件,在回调中也可以播放音乐;
所以,为了保险起见,可以同时监听两个事件,以增强其适用性。】
——摘自 https://www.cnblogs.com/wmhuang/p/5452259.html
[2] Safari问题
解决方案:监听touchstart
事件,在用户点击屏幕的时候开始播放音乐
[3] 解决方案代码
//--创建页面监听,等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById('audio');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
function audioAutoPlay() {
var audio = document.getElementBy