前言

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

总结

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

# 微信  # audio  # 自动播放  # ios  # 微信不支持audio标签  # 解决ios微信页面回退不刷新的问题  # 快速解决ios微信下audio无法自动播放的问题  # 就可以  # 可以自动  # 都是  # 是因为  # 那就  # 说了  # 屡试不爽  # 不可以  # 不多  # 你想  # 有一定  # 这段  # 这就  # 播放器  # 做一个  # 这个时候  # 解决问题  # 如果不是  # 十几 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何快速搭建安全的FTP站点？  Linux安全能力提升路径_长期防护思维说明【指导】  历史网站制作软件,华为如何找回被删除的网站？  jQuery validate插件功能与用法详解  Laravel如何实现API版本控制_Laravel版本化API设计方案  ,在苏州找工作，上哪个网站比较好？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  如何在云主机上快速搭建多站点网站？  桂林网站制作公司有哪些,桂林马拉松怎么报名？  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  如何快速搭建自助建站会员专属系统？  如何在建站之星绑定自定义域名？  如何快速搭建高效WAP手机网站？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  C语言设计一个闪闪的圣诞树  如何在腾讯云免费申请建站？  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  高端企业智能建站程序：SEO优化与响应式模板定制开发  佛山网站制作系统,佛山企业变更地址网上办理步骤？  微信小程序 wx.uploadFile无法上传解决办法  免费网站制作appp,免费制作app哪个平台好？  Android使用GridView实现日历的简单功能  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  如何快速重置建站主机并恢复默认配置？  Mybatis 中的insertOrUpdate操作  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  如何用y主机助手快速搭建网站？  利用vue写todolist单页应用  如何在Windows虚拟主机上快速搭建网站？  如何在建站之星网店版论坛获取技术支持？  Laravel怎么使用artisan命令缓存配置和视图  大同网页,大同瑞慈医院官网？  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  如何获取免费开源的自助建站系统源码？  如何利用DOS批处理实现定时关机操作详解  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  北京企业网站设计制作公司,北京铁路集团官方网站？  怎么用AI帮你为初创公司进行市场定位分析？  音响网站制作视频教程,隆霸音响官方网站？  *服务器网站为何频现安全漏洞？  Linux系统命令中tree命令详解  IOS倒计时设置UIButton标题title的抖动问题  企业网站制作这些问题要关注  UC浏览器如何设置启动页 UC浏览器启动页设置方法  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  网站建设要注意的标准 促进网站用户好感度！  敲碗10年！Mac系列传将迎来「触控与联网」双革新