摘要：
由于经常做h5宣传页，所以每次都需要用到自动播放音乐功能。但这个功能在手机端确实是个坑！除了ios外，安卓机上也有坑！

不得不说，这个问题前前后后折腾了几次，但一直都存在问题。然后这几天艺灵又特意抽空专门研究了下，最后得出的结论是：手机端真TM的坑！！！

一、成品效果

做过h5宣传页的看官肯定会遇到一个问题，即：背景音乐如何在各版本的手机上自动播放。如果看官是使用网上现成的第三方工具，例如：易企秀、兔展、橙秀等等的话，请无视本文吧！

还是来张动态gif效果图演示一下吧。如图：

css3炫酷音乐按钮特效

至于功能，相信看官都能一目了然。无非就是一个带开关的音乐播放器功能，点击图标时可切换音乐的播放和暂停状态。

可别小看了这个玩意儿，在手机端的坑，那可是谁踩谁知道啊！

好了，咱也不废话了，直接进入主题。

二、制作页面

2.1、html代码

首先，我们先来完成页面制作工作。

html代码

<div id="music">
　<audio id="bgmusic" src="http://www.w3school.com.cn/i/song.mp3" autoplay preload loop controls class="none"></audio>
　<span class="music-on"></span>
</div>

2.2、css代码

有了html代码，还需要配合上炫酷的css3特效才能显得逼格更高些！

css样式

<style type="text/css">
　#music{background-size:contain;width:50px;height:50px;cursor:pointer}
　.music-on{background:url(music-on.png) no-repeat;background-size:contain;-webkit-animation:rot360 2s linear infinite;animation:rot360 2s linear infinite;display:block;width:100%;height:100%;cursor:pointer}
　.on{background:url(music-off.png) no-repeat}
　.on .music-on,.none{display:none}
　@-webkit-keyframes rot360{
　　0%{-webkit-transform:rotate(0);transform:rotate(0)}
　　100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
　}
　@keyframes rot360{
　　0%{-webkit-transform:rotate(0);transform:rotate(0)}
　　100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
　}
</style>

好了，现在基本的形状有了，但我们无法自由控制音乐图标的播放和暂停状态。所以，接下来就交给js来完成。

2.3、js代码

js控制切换状态

<script>
　var audioEl=document.getElementById('bgmusic');
　var mus=document.getElementById('music');
　var play=false;
　mus.onclick=function(){
　　if(play){
　　　mus.className='';
　　}else{
　　　mus.className='on';
　　}
　　play=!play;
　}
</script>

现在我们再点击页面中的音乐图标就可以控制自由切换状态了。想体验的用拿起手机扫描下方的二维码进入页面。

初步实现音乐图标的切换功能

三、解决方案

如果看官已经用手机扫描过上方的二维码，可能会出现以下两种情况。
情况一：进入页面后会听见音乐已经在播放了；
情况二：点击图片按钮后才能听见声音。

可能有些看官此前也在网上查过相关的资料，大致上网上是这么说的：ios上的浏览器为了用户着想，默认禁止了音乐自动播放。言外之意就是说：我们正常写的代码只有在ios手机上的浏览器中不能自动播放，其他手机上应该是畅行无阻的。

在这里，艺灵需要附上两篇相关文章。
文章一：在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式。
链接地址：https://www.douban.com/note/527229751/；
文章二：在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式。
链接地址： https://www.douban.com/note/527250492/
有了这两篇文章的代码，我们就可以解决ios端音乐无法自动播放的问题了，是不是感觉非常赞！？是不是有点小激动？？

四、UC有毒

此处先让看官高兴下，暂时省略几百字......

哼！别做梦了！你以为现在的手机会乖乖听话？有种拿出手机，不管是ios还是安卓机，随便。然后打开手机中的UC浏览器，点击uc浏览器上的扫描功能扫描上面两个链接里面的二维码。

卧槽！怎么没有声音？难道我开静音了？

......

不得不面对的一个事实就是：无论是ios还是安卓机，uc浏览器都不能进行自动播放！

不知道这个问题是uc厂商效仿了ios还是什么情况，反正艺灵在公司借了好几部手机，好几个版本的uc浏览器都存在这个现象。这让本来看似已经解决问题的我，心情又更加沉重了下来......

五、暂时权宜之计

无奈之下，艺灵对上面的代码进行了改造，然后判断如果是uc浏览器或ios上的浏览器，就默认隐藏掉音乐图标；当用户手动触碰屏幕的时候，显示图标。这样就避免了在uc浏览器上图标和声音不同步的问题。想体验的看官拿起手机扫描下方的二维码。

如果是uc或ios浏览器就隐藏图标，触碰屏幕时显示图标并自动播放。

六、源码

6.1、完整源码打包下载

源码包下载

[源码]css3炫酷音乐按钮特效.zip　积分：10　大小：4KB　

七、最后

对于现有的浏览器，上面的代码也只是暂时发现uc存在这个问题。在以后，手机上的浏览器厂商势必会新增不少，所以上面的代码可能在以后并不适用。但考虑到h5宣传页的推广场景的话，一般都是微信主推。所以首要保证微信上过关即可。如果看官非要搞个完美的方案的话，艺灵看好你哦！到时记得分享下源码哈，免得我再踩坑了。

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

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/html5/2017-06-09/545.html

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