当前位置: 首页 > 编程笔记 >

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

翟元凯
2023-03-14
本文向大家介绍iOS系统和微信中不支持audio自动播放问题的解决方法,包括了iOS系统和微信中不支持audio自动播放问题的解决方法的使用技巧和注意事项,需要的朋友参考一下

前言

最近在做一个移动端项目,需要为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, 因此我们通过一个html" target="_blank">用户交互事件来主动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调起微信支付显示系统繁忙问题的使用技巧和注意事项,需要的朋友参考一下 最新刚到新公司接手一个项目,当微信支付时可以跳转到微信界面,但会弹出对话框显示 '系统繁忙',点击确定就留在微信,不返回APP,然后就各种调试,微信的DEMO和接入文档都看穿了,都还没能解决问题,网上也是找了各种答案,什么降低微信支付SDK版本,还有检查传过去

  • 本文向大家介绍解决nginx不支持thinkphp中pathinfo的问题,包括了解决nginx不支持thinkphp中pathinfo的问题的使用技巧和注意事项,需要的朋友参考一下 下面小编通过文字加代码的方式给大家详解下,具体内容如下: 其实,要解决nginx不支持pathinfo的问题,有两个解决思路,一是不使用pathinfo模式,二是修改nginx的配置文件,使它支持pathinfo。为

  • 问题轮播:https://codepen.io/ben456789/pen/jxvrxj 我正在构建这个相当自定义的自动播放和循环Owl旋转木马,我遇到了一些问题,我在这里没有找到一个解决方案。 当轮播回到“tab 1”时,类被放置在正确的上,但是定位幻灯片的内联样式没有更新,因此幻灯片显示在屏幕之外。我在初始化时设置的选项有问题吗?我相信,当我单击选项卡转到特定的时,我也有同样的问题。如有任何帮

  • 本文向大家介绍win2003远程退出后系统自动注销问题的解决方法,包括了win2003远程退出后系统自动注销问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 解决windows2003远程退出后系统自动注销 如果通过上面的操作,还会出现远程桌面连接断开过段时间之后,运行的软件自动关闭的话,就再进行以下操作: 1、开始-->运行-->tscc.msc 连接-->RDP-Tcp右键属性-->会话

  • 本文向大家介绍微信小程序  audio音频播放详解及实例,包括了微信小程序  audio音频播放详解及实例的使用技巧和注意事项,需要的朋友参考一下  微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频。 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boo

  • 我试图强制刷新布局,重启,更新Android Studio,停止杀毒一段时间,但问题仍然在那里。 令人惊讶的是,我能够编译和运行应用程序,但如何摆脱这个错误? 我正在使用: Android Studio 3.5.3 Android SDK工具29.0.2 Android SDK平台Android 10.0(Q)Android SDK平台29 默认OpenJDK平台二进制 要再现错误,请执行以下操作