iOS系统和微信中不支持audio自动播放问题的解决方法

2020-07-26 02:42:12

字体：大中小

来源：转载

供稿：网友

前言

最近在做一个移动端项目，需要为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，自动播放流量瞬间就出去了，哭都来不及，所以如果不是必要情况还是不要自动播放的好，听不听看不看交给用户来选择。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对武林网的支持。

上一篇：iOS开发微信收款到账语音提醒功能思路详解

下一篇：IOS开发笔记之禁用手势滑动返回功能的示例