解决H5中背景音乐无法自动播放问题

一、前言

   现在客户要求做H5场景应用、H5微刊、H5微杂志的时候加入背景音乐，这样能够很好地烘托气氛还能使整个案例生动不少，然并卵，由于市场上的手机型号过于繁杂，对于H5 API的支持十分地不统一，还有H5运行平台的不一致：有的在微信壳下，有的在浏览器里，有的在自己的APP里，等等因素造成在H5开发的过程中一不小心就掉进坑里了，今天小五就来讲一讲很多人在H5开发中遇到的背景音不能自动播放的问题。

二、原因

   现在IOS系统升级以后，禁止了Audio的Autoplay属性，原因如下：

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

This plays the movie:<input type="button" value="Play" onclick="document.myMovie.play()">

This does nothing on iOS:

详情请查看

https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

   翻译过来后可以了解到：苹果为了用户着想，禁止了Autoplay和JS "onload" 加载播放，也就是说即使你在html文件里使用了preload和autoplay属性，在移动版 Safari 上，此属性会被忽视，并且不会加载视频流，甚至不会下载该视频流。除非用户物理点击一次屏幕，其实现在不能苹果手机，其他的安卓手机和部分App有时也存在背景音不能自动播放的问题。

三、背景音不能自动播放的场景及解决办法

1、大部分IOS系统和少部分Android系统的微信壳下不支持自动播放

   解决方案：监听WeixinJSBridgeReady事件、DOMContentLoaded事件

   微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上，WeixinJSBridge并不是WebView一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件"WeixinJSBridgeReady"。

发现部分机型，监听DOMContentLoaded和load事件，在回调中也可以播放音乐；

所以，为了保险起见，可以同时监听两个事件，以增强其适用性。

代码如下：

<div class="musicinfo" id="musicinfo">
        <audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay"  loop="loop">您的浏览器不支持 audio标签。</audio>
        <img class="music on roate" src="musicon.png">
</div> 
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById(' musicid ');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});

   解决方案：通过手势事件播放音乐

   (1) 监听body的touchstart事件，回调中播放音乐；

   缺点：第一次点击按钮元素可能不响应，部分元素的touch事件可能会阻止冒泡，需要在对应的地方调起播放音乐函数

var audio = document.getElementById('musicid');
function musicInBrowserHandler() {
     audio.play();
     document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);

   (2) 可以增加透明层，点击到透明层，播放音乐，关闭透明层；

   缺点：第一次点击按钮元素可能不响应，而且有时候用户不会在打开页面短时间内点击，造成用户体验上的伤害。

3. 部分App不支持webview音乐自动播放

   解决方案：1.壳浏览器支持；2.通过手势事件播放音乐

   缺点：有些壳浏览器可能没有音频自动播放的接口，或者用户不进行手势操作。

四、完整代码

<!-- 音乐 start-->
<div class="musicinfo" id="musicinfo">
    <audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay"  loop="loop">您的浏览器不支持 audio标签。</audio>
    <img class="music on roate" src="musicon.png">
</div>
<!-- 音乐 end-->
<script type="text/javascript">
	// 音乐播放
	function autoPlayMusic() {
	    // 自动播放音乐效果，解决浏览器或者APP自动播放问题
	    function musicInBrowserHandler() {
	        musicPlay(true);
	        document.body.removeEventListener('touchstart', musicInBrowserHandler);
	    }
	    document.body.addEventListener('touchstart', musicInBrowserHandler);

	    // 自动播放音乐效果，解决微信自动播放问题
	    function musicInWeixinHandler() {
	        musicPlay(true);
	        document.addEventListener("WeixinJSBridgeReady", function () {
	            musicPlay(true);
	        }, false);
	        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
	    }
	    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
	}
	function musicPlay(isPlay) {
	    var audio = document.getElementById('musicid');
	    if (isPlay && audio.paused) {
	        audio.play();
	    }
	    if (!isPlay && !audio.paused) {
	        audio.pause();
	    }
	}
	autoPlayMusic();
</script>

五、总结

   苹果和部分安卓手机认为这种背景音自动播放，是不友好的行为，所以给禁了，其实小五也比较偏向于由用户选择是否播放音乐，毕竟流量还是很贵的，一个音频文件少则几十K，多则好几M，流量刷刷的没有了，然而大家还是在自动播放背景音上想尽办法，这对用户体验真的好吗？

六、建议

   那么对于选择自动播放音乐的客户，小五提出一些建议：

1.音乐不宜过长，30s为佳，而且音乐要加上渐现渐隐效果，方便循环播放；

2.音乐体积要小，音质和流量，在手机上还是优先考虑流量吧。

一般背景音乐体积可以接受的范围是200K以下，若太大，可以使用格式工厂等软件，降低它的比特率和声道来改变体积。