今天做了一个简单的落地页项目，就是类似于手机微信上经常看到的滑动效果。因为公司要求需要自己开发，所以我就用swiper+swiper.animate开发，开发速度很快，只不过最后音乐哪里出现了一点小bug在ios手机上不能自动播放。本着互联网分享精神我将分享给大家怎么解决这个bug。
思路讲解
因为右上角的音乐图标需要转动，同时音乐播放。我的设计思路是当音乐加载完成后，音乐播放，图标转动（图标默认是不转动的），要不然有些用户网速慢造成音乐加载不完，图标却先转动了，这样也不符合逻辑。图标的转动和不转动切换时使用切换class实现的。这里我就不做过多的讲解了。
Html源码
<audio id="narrate" src="music/1.mp3" loop="loop" preload="preload"></audio>
js源码
var music = document.getElementById('music');
var mnarrate = document.getElementById('narrate');
mnarrate.oncanplay = function () { //音乐加载完成执行的函数
music.className = 'start-music';//图标开始旋转
mnarrate.play(); //音乐开始播放
};
但是上列代码有个弊端，我在浏览器上测试的好好的，安卓也没什么事情。但是到ios上音乐不能播放只能点击下之后才能播放。由于iOS的安全机制问题。不允许audio和video自动播放,即使给play()也是播放过不了。
解决方案1
使用微信sdk
js源码
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
function autoPlay(id) {
var audio = document.getElementById(id);
$('#narrate').addClass('start-music');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
audio.play();
}, false);
}
autoPlay('narrate');
注意调用以上方法需要配置wn.config如果不配置调用不了，并且以上代码只有在微信访问的时候才生效，其他环境不生效。
以上方法可能有些复杂，所以还有一个折中的办法。因为是落地页么。所以用户很有坑能滑动或者点击了屏幕，我们可以利用这一点来实现音乐自动播放。
js代码如下
var music = document.getElementById('music');
var mnarrate = document.getElementById('narrate');
var html = document.getElementsByTagName('html')[0];
var oneClick = true; //指允许点击一次变量。
mnarrate.oncanplay = function () { //非ios执行函数
music.className = 'start-music';
mnarrate.play();
};
html.addEventListener('touchstart', function () {//ios执行函数。可与上非los同时使用两者不冲突。
if (oneClick === false) {
return
}
oneClick = false;
music.className = 'start-music';
mnarrate.play();
}, false);
以上代码是给html加一个触碰事件，一旦触碰音频开始播放，这一点ios是允许的。因为项目比较小我用原生写的，如果用jQuery的话有一个one方法，这个方法是指执行一次。
后记：互联网世界之大，高手如云，本着虚心学习的半杯水精神，如果哪位大神有更好的方案可以给我留言。我会及时回复。