小编给大家分享一下iOS系统和微信中不支持audio自动播放怎么办，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
移动端音频播放代码
css
计算
安全
数据库
网络和加速
企业服务
.pause { position: absolute; z-index: 10000; bottom: 10px; right: 10px;}
.pause a { width:30px; height:30px; background:url(https://cache.yisu.com/upload/information/20200623/126/121211.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系统和微信中不支持audio自动播放怎么办”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
