关于微信下部分手机没法播放背景音乐

本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件，经过监听这个事件来触发的。那有个坑就是 若是微信已经ready了，但还没执行到你监听这个ready事件的代码，那么你的监听是没用的，因此最理想的状况是，监听的js放在head前面(放在css外链以前)，确保最新执行，切记！切记！。

·另外一个坑就是，本文的解决方案只适合一开始就播放的背景音乐。若是你是作那种微信场景（打开页面模拟收到不少条微信，每条微信都要播放那段音效），实际上本文的解决方案是不行的。由于ready的事件只会执行一次，即便你在ready事件里面用setTimeout或者setInterval也可能会致使丢失状况。

---

前言

在作各类HTML5场景页面的时候，插入背景音乐是一个很广泛的需求。咱们都知道，IOS下的safari是没法自动播放音乐的，以致一直以来形成一种错误的认识，iso是没法自动播放媒体资源的。直到微信火爆起来，咱们发现IOS的微信里面打开的页面却能够实现自动播放。这种状况颠覆了我以前的认知。可是，可是。。。最近的项目，又发现了一个头疼的问题。部分的IOS微信，打开有自动播放背景音乐的页面没有声音！！最头疼的是同款机子，相同的IOS系统，相同的微信版本！！没错，前端就是要常常这么折腾的，同一个问题，你觉得找到了最终的解决方案，可是各类浏览器更新快速，昨天没问题，也许今天就有问题了。还好，这个问题暂时找到缘由了，详情请看下文。

解决方案

先看下平时使用audio标签插入背景音乐的代码：

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" autoplay preload loop="loop"></audio > 

正常来讲，上面的写法在安卓和大部分IOS机子的微信是能够播放的（safari这里就忽略讨论），能够扫一扫demo测试下你的手机：

若是上面的demo，你的ios微信能够播放，说明你的是大部分正常的手机。若是不能播放，哈哈，你成为了少部分不能正常播放的幸运者。。。

那代码有办法解决这少部分用户呢？如何解决呢？

答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件，测试发现，上面说的少部分的机子微信只要作微信ready后执行播放，就能够用代码实现自动播放功能了！具体代码请看下面：

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio > function audioAutoPlay(id){ var audio = document.getElementById(id); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay('Jaudio'); 

刚才若是你第一个demo不能播放的童鞋能够再扫一扫测试下（若是第一个demo已经测试正常的，这个确定是正常的啦）

是否是听到声音了呢？！！解决方案就是这么简单。

后语

总结下吧，关于音乐自动播放的问题，如今能够分为三种：

1-支持audio的autoplay，大部分安卓机子的自带浏览器和微信，大部分的IOS微信（无需特殊解决）

2-不支持audio的autoplay，部分的IOS微信（本文提供的解决方案）

3-不支持audio的autoplay，部分的安卓机子的自带浏览器（好比小米，开始模仿safari）和所有的ios safari（这种只能作用户触屏时就触发播放了）

那么针对已知的三种状况，关于自动播放背景音乐的问题，咱们来总结一下综合解决方案代码吧：

 

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio > function audioAutoPlay(id){ var audio = document.getElementById(id), play = function(){ audio.play(); document.removeEventListener`请输入代码`("touchstart",play, false); }; audio.play(); document.addEventListener("WeixinJSBridgeReady", function () {//微信 play(); }, false); document.addEventListener('YixinJSBridgeReady', function() {//易信 play(); }, false); document.addEventListener("touchstart",play, false); } audioAutoPlay('Jaudio');