iOS系统和微信中不支持audio自动播放问题的解决方法
程序员文章站
2023-12-18 15:30:04
前言
最近在做一个移动端项目,需要为h5配一段背景音乐且要自动播放,按照以往的方法将自动播放代码加入进去就可以了,可以却发生了点小插曲(捂脸),下面话不多说了,来一起看看...
前言
最近在做一个移动端项目,需要为h5配一段背景音乐且要自动播放,按照以往的方法将自动播放代码加入进去就可以了,可以却发生了点小插曲(捂脸),下面话不多说了,来一起看看详细的介绍吧。
移动端音频播放代码
css
.pause { position: absolute; z-index: 10000; bottom: 10px; right: 10px;} .pause a { width:30px; height:30px; background:url(http://mat1.gtimg.com/zj/maxbao/reai/imgs/units-icons.png) 0 0 no-repeat; display:block; background-size: 90px auto;} .pause a.on { -webkit-animation:reverserotataz 1.2s linear infinite} .pause a.off { } .pause span{ color: #fff; font-size: 16px; position:absolute; left:-40px; top:5px; text-shadow:1px 1px 1px #000; letter-spacing:2px; -webkit-transition:all .2s linear; opacity:0; -webkit-transform:translatex(-20px) } .pause span.z-show { opacity:1; -webkit-transform:translatex(0px)} .coffee-steam-box { -webkit-transform:translate(-40px,-40px)} @-webkit-keyframes reverserotataz { 0% { -webkit-transform:rotatez(0deg) } 100% { -webkit-transform:rotatez(-360deg) } } .audio{position: absolute; z-index:10; visibility: hidden; opacity: 0; left: 0px; top:0px; width: 100px ; height: 30px;}
html
<div class="pause"> <a class="on" href="#" rel="external nofollow" > </a> <span>开启</span> </div> <div class="audio"> <audio src="http://mat1.gtimg.com/ln/images/2016zt/12dec/dlsdbm/music.mp3" controls="controls" preload="auto" autoplay="autoplay" id="audio" loop></audio> </div>
javascript
//播放器 (function($) { $(document).ready(function() { var musiccontrol = function(obj){ var classname = $.trim(obj.attr('class')); //alert(classname); if (classname == 'on') { document.getelementbyid('audio').pause(); obj.removeclass('on').addclass('off'); obj.siblings('span').text('关闭'); $('.pause span').addclass('z-show'); $('.music-icon').removeclass('active'); settimeout(function(){ $('.pause span').removeclass('z-show'); },500); } else if (classname == 'off') { document.getelementbyid('audio').play(); obj.removeclass('off').addclass('on'); obj.siblings('span').text('开启'); $('.music-icon').addclass('active'); $('.pause span').addclass('z-show'); settimeout(function(){ $('.pause span').removeclass('z-show'); },500); }; return false; } $('.pause a').click(function () { musiccontrol($(this)); }); var audio = document.getelementbyid('audio'); audio.play(); $(document).one("touchstart", function() { audio.play() }) }); })(jquery);
问题解决
加进去后用微信(ios系统)浏览页面发现居然没有自动播放,点击暂停后再次点击播放正常,这就说明播放功能没有问题,将页面用ios自带浏览器safari打开后也不能自动播放,往年都是用这段代码,屡试不爽难道突然就不好使了?随即用android手机打开页面,居然可以自动播放,那就证明代码本身是没有问题的,随后查了相关文献,是因为ios safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动play一下audio应该就可以解决问题了,代码如下:
document.getelementbyid('idname').play();
这个时候safari可以自动播放了但是发现微信里面居然还是不行,难道是微信做了什么处理?将代码修改如下:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> //一般情况下,这样就可以自动播放了,但是一些奇葩iphone机不可以 document.getelementbyid('idname').play(); //微信必须加入weixin jsapi的weixinjsbridgeready才能生效 document.addeventlistener("weixinjsbridgeready", function () { document.getelementbyid('idname').play(); document.getelementbyid('video').play(); //视频自动播放 }, false); </script>
至此已经完美解决了自动播放的问题,其实对于不允许音频视频自动播放的问题来说不一定就是坏事,因为你想毕竟大家流量那么贵,一个音频视频动辄就几mb甚至十几mb、几十mb,自动播放流量瞬间就出去了,哭都来不及,所以如果不是必要情况还是不要自动播放的好,听不听看不看交给用户来选择。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。