ios audio不能自动播放

　　今天做了一个简单的落地页项目，就是类似于手机微信上经常看到的滑动效果。因为公司要求需要自己开发，所以我就用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方法，这个方法是指执行一次。

　　后记：互联网世界之大，高手如云，本着虚心学习的半杯水精神，如果哪位大神有更好的方案可以给我留言。我会及时回复。