摘要：
　　上次做h5活动页时，在声音上面折腾了一天多。如果新手看官也即将着手h5的话，在声音上面肯定也会浪费非常多的时间，而本文在一定程度上也许会帮助到您......

一、踩坑

如果看官需要做一个h5活动推广页的话，各种手机屏幕适配、下下左右滑屏、声音、表单这些都是必不可少的！而对于做案例比较少的看官(也包括我在内)，在前期制作中必定会踩很多坑！比如说：滑屏插件不合适，以至于后来产生各种各样的问题、ios中禁用了自动播放，如何解决音乐与图标同步的问题、各种低端系统中莫名的bug、......

下面，我们就来看看今天提到的这个坑吧。

二、播放器事件

我们先从简单的说起，先完成这个播放器吧。

2.1、播放器html

相关代码

<audio loop="" src="20160803.mp3" id="audio" preload="" controls>
</audio>

上面代码展示的效果如图：　当我们点击播放按钮的时候就可以进行播放了。如果看官需要体验，请拿出手机扫下面的二维码。　

但在手机上，我们肯定不会让播放器显示这样，通常我们都是以一个音符的图标来代替播放器，然后点击暂停后切换成另一种图标。所以这里我们要先处理好播放与暂停事件，然后再根据各自状态用css来控制样式。

2.2、播放与暂停功能

相关代码

<h1 id="aud-btn">点击播放</h1>
<audio loop="" src="20160803.mp3" id="audio" preload="" controls=""></audio>
<script type="text/javascript">
　var btn=document.getElementById('aud-btn');
　var aud=document.getElementById('audio');
　btn.onclick=function(){
　　if(aud.paused){
　　　btn.innerHTML='播放状态，点我暂停';
　　　aud.play();
　　}else{
　　　btn.innerHTML='暂停状态，点我播放';
　　　aud.pause();
　　}
　};
</script>

此时我们点击文字的时候会进行切换播放与暂停功能，音乐也会跟随着发生变化。体验地址：　

2.3、界面美化

刚我们实现了功能，下面要进行美化界面。这里我们需要准备两张状态图片，还是来看代码吧。

美化代码

<style type="text/css">
body{background:#ccc;}
.none{display:none !important;}
#aud-btn{background: url(H-5_41.png) no-repeat 50% 0;background-size:contain;width:55px;height:55px;margin:20px auto;display:block;border:2px solid #fff;border-radius:50%;font-size:0;}
#aud-btn.on{background-image:url(H-5_42.png);}
</style>
<span span id="aud-btn" class="off">播放/暂停</span>
<audio loop="" src="20160803.mp3" id="audio" preload="" class="none"></audio>
<script type="text/javascript">
　var btn=document.getElementById('aud-btn');
　var aud=document.getElementById('audio');
　btn.onclick=function(){
　　if(aud.paused){
　　　btn.className='';
　　　aud.play();
　　}else{
　　　btn.className='off';
　　　aud.pause();
　　}
　};
</script>

此时美化后的两种状态图为：　怎么样，有点感觉了吧。体验地址：　

看似一切都进展的非常顺利，但事实真的如此吗？？？

通常，因需求都会要求音乐自动播放，那我们再来修改下上面的代码吧，让感觉来的更强烈些吧！

2.4、自动播放音乐

修改代码

<span span id="aud-btn" class="">播放/暂停</span>
<audio loop="" src="20160803.mp3" id="audio" preload="" class="none" autoplay></audio>

体验地址：　注意上面黄色高亮部分，此部分为修改项。拿起手机扫码后会听到音乐已经自动播放了，ios系统的iphone手机此处无效！

但是，当苹果用户扫码后就呵呵了，说好的自动播放呢？？？

三、ios微信端解决方案

我们先不说用浏览器打开，先解决微信的吧。这个不用说，网上方法一堆一堆的，此处就大致copy下代码，不做细说。因为在后面会有一个完整版的方案。

3.1、ios微信端自动播放音乐

相关代码

document.addEventListener('WeixinJSBridgeReady',function(){
　WeixinJSBridge.invoke('getNetworkType',{},function(e){
　　play();
　});
},false);

也许会有看官在网上看到过其它的解决方案，例如：先load()然后再play()、模拟用户触屏一下、等等。然而，这些并没什么卵用......

我在公司用了两台iphone手机测试，一台是iphone6，一台是iphone6 plus，系统都是9+的，网上的方法测试遍了，明明可以看到已进入了判断条件中，但就是不执行触发事件。也许是版本太高了吧，旧方法已不能执行了，也许是传说中的rp问题......

四、ios端终极解决方案

经过我的一番摸索与测试，这里面有参照http://www.w3cmark.com/2016/434.html文章中提供的微信端方案，然后我再根据业务需求进行改进成适合我的方案。

4.1、我的逻辑

1、html中去掉自动播放属性autoplay；
2、在js中，封装一个自动播放事件并在window.onload完成后进行调用以达到自动播放的目的；
3、用navigator.userAgent进行判断手机系统，如果是ios则进行单独处理；
4、如果是ios并且是微信打开，则进行自动播放，否则，用一个遮罩层放页面上，当用户触屏的时候，实际上是触发了这上遮罩层，然后执行播放事件，同时要隐藏这个遮罩层，以免用户无法执行其它操作。

关于代码，这里只放核心代码，完整代码可参见下面实例。

核心代码

<!--html-->
　<!--默认隐藏ios时的遮罩层-->
　<div id="iphone"></div>
<!--js-->
　//系统
　var uai=navigator.userAgent.toLowerCase();
　//定义闭包自动播放函数，方便调用
　function audioAutoPlay(id){
　　//如果是ios，则进入这里面
　　if(uai.match(/iphone/gi)){
　　　//如果是微信，
　　　if(uai.match(/micromessenger/gi)){
　　　　//执行播放事件
　　　　play();
　　　}else{
　　　　//浏览器时执行
　　　　//显示遮罩层，当用户点击后隐藏遮罩层并执行播放和更改图标
　　　}
　　});
　//其它代码
　})

手机扫码访问最终效果：　

五、真机调试

我觉得做第二个h5的过程中做的最傻x的一件事情就是：iphone机主人关掉了声音，而我(在不知道的情况下)还在不停的调试声音。这个我搞了2个多小时，当初还以为代码有问题，后来吐槽时才知道，原来关掉了声音。所以看官们在调试声音之前，一定要检查设备有无声音。顺便说一句，iphone关掉声音的键在左上角有一个凹槽，如果颜色是红色就表示关，切记！

六、最后

明天去公司了再借个ios手机测试下新的方法，如果有效的话会更新到这篇文章中，如果不行就到此为止吧。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2016-08-07/428.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。