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

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

转载作者：qq735679552 更新时间：2022-09-27 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章iOS系统和微信中不支持audio自动播放问题的解决方法由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

前言。

最近在做一个移动端项目，需要为H5配一段背景音乐且要自动播放，按照以往的方法将自动播放代码加入进去就可以了，可以却发生了点小插曲（捂脸），下面话不多说了，来一起看看详细的介绍吧.

移动端音频播放代码。

css 。

 
    ? 
   
 
     
       
       
         .pause {  
         position 
         :  
         absolute 
         ;  
         z-index 
         :  
         10000 
         ;  
         bottom 
         :  
         10px 
         ;  
         right 
         :  
         10px 
         ;} 
        
 
         .pause a {  
         width 
         : 
         30px 
         ;  
         height 
         : 
         30px 
         ;  
         background 
         : 
         url 
         (http://mat 
         1 
         .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.2 
         s 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 
         . 
         2 
         s 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( 
         0 
         deg) 
        
 
           
         } 
        
 
           
         100% 
         { 
        
 
           
         -webkit-transform:rotateZ( 
         -360 
         deg) 
        
 
           
         } 
        
 
         } 
        
 
         .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，自动播放流量瞬间就出去了，哭都来不及，所以如果不是必要情况还是不要自动播放的好，听不听看不看交给用户来选择.

总结。

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

原文链接：http://www.webexp.cn/dlsd2016.html 。

最后此篇关于iOS系统和微信中不支持audio自动播放问题的解决方法的文章就讲到这里了,如果你想了解更多关于iOS系统和微信中不支持audio自动播放问题的解决方法的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： C语言位图算法详解

文章推荐： Java校验银行卡是否正确的核心代码

文章推荐： Java--Socket通信（客户端服务端双向）

文章推荐： C语言快速幂取模算法小结

mysql - Processmaker 安装 MySQL 支持 : undefined , GD 支持 : not enabled , LDAP 支持 (*):未启用
我的 processmaker 安装遇到了一些问题。我正在尝试使用本指南 [url]http://wiki.processmaker.com/index.php/ProcessMaker_Ubuntu
ios - 验证 iMessage 支持、SMS 支持
我正在使用 ShareKit。发送 SMS 消息使用 MFMessageComposeViewController，用户看到标题“文本”。我想将该标题更改为更能反射(reflect)实际可用内容的内容
android - ActionBar(支持)和 Fragment(支持)
我需要在我的一个针对 Gingerbread 的 Android 应用程序中使用操作栏和 fragment 的组合。所以我使用了 v7 支持库中的操作栏和 v4 支持库中的 fragment ，并使用
javascript - 为什么 Web Workers 中有同步 FileSystem 支持，但没有同步 WebSocket 支持？
我明白为什么浏览器 vendor 不想帮助我阻止他们的 UI 线程。但是，我不明白为什么会有: Web Workers 中没有 sleep (2) 没有同步 WebSockets API 有一个syn
hadoop - Cloudera 支持 docker 容器或 Docker 支持 CM 5 图像
最近我的组织正在考虑使用 Docker。我们组使用的是cloudera CDH 5.1.2。 1) cloudera 是否与 Docker 容器兼容？2) docker 和cloudera 组合是否存
macos - 如何在 Mac 上完整(具有所有功能 - ACL 支持/Xattr 支持/xxhash 库/zstd 库)安装(编译)rsync v3.2.3？
我正在尝试通过编译在 Mac 上安装 rsync 3.2.3。但是，我想安装所有功能。为此，它需要一些库，此处 ( https://download.samba.org/pub/rsync/INSTA
pydev 支持 nose2
我一直在使用 PyDev 成功运行 nose 测试，并想试试 nose2。所以我安装了它 pip install nose2 复制/粘贴来自 http://nose2.info/ 的示例代码进入名为
LLVM OpenMP 支持
我想知道 LLVM 中是否有任何函数/方法可以在 LLVM IR 中添加 Open-MP 构造。 llvm-3.0 是否仍然支持 OpenMP 指令？最佳答案 OpenMP 是一种高级语言扩展。因此
支持 CUDA 的设备
我对 CUDA 编程非常陌生。我正在浏览 SDK 附带的示例。我能够编译代码，但是当我运行它时，出现以下错误: "clock.cu(177) : CUDA Runtime API error 38:
RStudio HiDPI 支持
RStudio 是用于 R 开发的出色 IDE。我想知道是否有任何方法可以很好地支持 HiDPI 分辨率？我目前有 13 英寸显示器和 3200x1800 分辨率，甚至很难阅读 RStudio 选项
Django RDF 支持？
我正在寻找一种有助于为 Django 项目提供 RDF 支持的工具。到目前为止，我发现了两个: django-rdf - 最后一次修改是在 4 年前，所以它看起来像是一个死项目。 djubby -
支持 Javascript 链接的关系运算符吗？
我刚刚尝试了一些 JS 核心原则，发现引擎评估链接的关系运算符而不会引发错误。相反，他们以我自己无法理解的方式进行评估。 console.log(1 4 > 3 > 2 > 1); //false,
支持 textmate 片段的编辑器？
我知道 etexteditor 和 vim/emacs。是否有任何其他 Windows 编辑器支持类似 textmate 的片段(例如，您编写触发词，按 Tab，它更改为某些内容，再次按 Tab，它
kubernetes - 如何验证集群网络策略配置/支持
我正在尝试找出验证给定集群的网络策略配置的最佳方法。 According to the documentation Network policies are implemented by the ne
boost MD5 支持？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
z3 - 支持 AUFBV？
Z3 会支持 AUFBV 吗？对于以下脚本: (set-logic AUFBV) (declare-fun x () (_ BitVec 16)) (declare-const t (Array (
c# - 支持/反对使用部分类进行测试的原因？
使用分部类编写 NUnit 测试的优缺点是什么？我要开始了: 亲:可以测试私有(private)方法缺点:TDD 不再可能了还有什么？最佳答案缺点:要么您必须测试与您发布的版本不同的构建，要
Javascript AOP 支持
它很容易(对于 90% 的 aop 特性)在没有任何语言本身支持的情况下做到这一点，就像大多数动态语言如 python 和 ruby 一样。然而，Dojo在 1.3.2 上直接支持它.最新版本发生
Android:测试字符是否可显示/支持？
我在我的 android 应用程序中使用亚洲字符，我已经了解到某些字符无法显示，因为系统字体不支持它们。我查询了一个包含亚洲字符的数据库，并且经常检索到无法显示的标志。这些情况对我的应用程序来说通常不
ios - 支持@的UITextView没有空格来放置用户名
你好，我想实现一个控件，我想在用户键入@字符时启用该控件，直到未填充运行文本中的空格为止，它应该显示用户列表，@符号后键入的文本应该显示基于键盘字符的建议，就像我们在上面看到的那样Twitter 或

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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