html5中的audio标签针对IOS系统的兼容处理

最近在写一个移动端项目,在Android设备是播放音乐没有问题,但是在苹果设备上音乐无法播放,查阅资料才知道safari默认在没有用户交互的情况下是不允许自动播放音乐的.

所以想到了用touchstart事件进行交互

代码

(function(){
        var audio = document.querySelector('#audio');
        function PlayAudio() {
               audio.load(); // iOS 9  需要load一下, 否则直接play无效
               audio.play(); // iOS 7/8 需要play一下
         }
    audio.addEventListener('play', function() {
        // 当 audio 能够播放后, 移除这个事件
        window.removeEventListener('touchstart', PlayAudio, false);
      }, false);
    window.addEventListener('touchstart', PlayAudio, false);
})();