背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐

  1. 出现的问题:在安卓手机上正常,iOS中没有反应

后来网上一番搜索后了解到时因为iOS不允许自动播放音乐,除非用户做出了交互行为

解决方案:
1.如果是在页面刚加载就需要自动播放音频的话还是比较好办的,可以利用微信提供的api来实现(应该是内部做了一些修改)

  1. // 通过config接口注入权限验证配置后, 在 ready 中 play 一下 audio
  2. function autoPlayAudio1() {
  3. wx.config({
  4. // 配置信息, 即使不正确也能使用 wx.ready
  5. debug: false,
  6. appId: '',
  7. timestamp: 1,
  8. nonceStr: '',
  9. signature: '',
  10. jsApiList: []
  11. });
  12. wx.ready(function() {
  13. document.getElementById('bgmusic').play();
  14. });
  15. }

参考:在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式

2.需要在某个特定的时机才播放背景音乐

既然iOS做了限制,那只能通过与用户进行交互实现,利用给html添加touchstart事件在回调函数中播放就可以了,需要注意的是:

这里不能同通过jquery的trigger触发,要得到用户真实的交互才会响应,因为只需要触摸一次就可以了,所以可以用one方法注册事件

  1. audio.play(); //安卓手机可以直接播放
  2. // 为iOS做兼容,为了保险起见,触摸事件都给他加上
  3. if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  4. var noPlay = true;
  5. $('html').one('touchstart',function(){
  6. if(noPlay) {
  7. audio.play();
  8. noPlay = false;
  9. }
  10. })
  11. $('html').one('touchmove',function(){
  12. if(noPlay) {
  13. audio.play();
  14. noPlay = false;
  15. }
  16. })
  17. $('html').one('touchend',function(){
  18. if(noPlay) {
  19. audio.play();
  20. noPlay = false;
  21. }
  22. })

到这里背景音乐已经可以播放了,但是对于用户体验不够好,如果我不触摸页面的话还是不会播放,如果你有更好的办法,可以加我QQ:32319149 一起讨论啊:)

参考文章:

H5案例分享:解决H5中背景音乐无法自动播放问题
解决iOS下音频无法自动播放

微信h5页面audio标签在ios下不能自动播放的更多相关文章

  1. 解决在ios下不能自动播放音频的问题

    在ios下面是不允许自动播放音频这个操作的,不过我们可以使用微信提供的sdk来做到自动播放音乐的功能 wx.ready(()=>{}) 引入微信的sdk,之后在回调函数里面执行主动触发背景音乐播 ...

  2. 微信h5页面下拉露出网页来源的解决办法

    微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉 //禁止页面拖动 document.addEventListener('touchmove', functio ...

  3. 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑

    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input ...

  4. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  5. 领导让我重新做一个微信H5页面!

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  6. js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享

    禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...

  7. 微信h5页面调用第三方位置导航

    微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考 ...

  8. 解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放

    在做html5时插入一个视频播放标签video后,测试时android.ipad客户端播放正常,唯独iphone自带浏览器无法播放. 解决办法: 判断用户所使用客户端访问h5页面时是iphone时,点 ...

  9. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

随机推荐

  1. mybatis处理LIKE模糊查询字符串拼接

    -- 最佳实践 <select id="getSealByMap" parameterType="map" resultType="map&qu ...

  2. 吴裕雄--天生自然python机器学习:Logistic回归

    假设现在有一些数据点,我们用 一条直线对这些点进行拟合(该线称为最佳拟合直线),这个拟合过程就称作回归.利用Logistic回归进行分类的主要思想是:根据现有数据对分类边界线建立回归公式,以此进行分类 ...

  3. 吴裕雄--天生自然 JAVA开发学习:序列化

    public final void writeObject(Object x) throws IOException public final Object readObject() throws I ...

  4. LeetCode No.124,125,126

    No.124 MaxPathSum 二叉树中的最大路径和 题目 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定 ...

  5. linux的nohup命令的用法(后台运行程序命令)

    linux的nohup命令的用法. 在应用Unix/Linux时,我们一般想让某个程序在后台运行,于是我们将常会用 & 在程序结尾来让程序自动运行.比如我们要运行mysql在后台: /usr/ ...

  6. aclocal-1.13: command not found

    原因: 将编译好的工程拷贝到系统版本不一样的系统中,再进行编译会出现此类问题. 解决方法: yum install automake autoconf yum install libtool auto ...

  7. BucketSort(桶排序)原理及C++代码实现

    桶排序假设输入数据服从均匀分布,平均情况下它的时间复杂度为O(n). 桶排序将输入数据的区间均匀分成若干份,每一份称作“桶”.分别对每一个桶的内容进行排序,再按桶的顺序输出则完成排序. 通常使用链表来 ...

  8. Java IO: 其他字节流(上)

    作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本小节会简要概括Java IO中的PushbackInputStream,SequenceInputS ...

  9. JavaScript学习总结(九)事件详解

    转自:http://segmentfault.com/a/1190000002174034 事件处理程序 在DOM中定义了一些事件, 而响应某个事件的函数就叫事件处理程序(或事件侦听器).事件处理程序 ...

  10. hadoop datanode 启动正常,但master无法识别(50030不显示datanode节点)

    start-all.sh 启动 坑爹 找不出错 试了各种办法,重新formaet 查看 集群ID是否相同.都无效 日志也没看到错 按官网方法手动一步步启,问题照旧 master节点,yarn name ...