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方法,这个方法是指执行一次。

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

  

上一篇:SpringMVC学习笔记二:常用注解


下一篇:接口测试平台代码实现118:登陆态cookie持久化