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

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

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

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

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

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

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

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

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

                        audio.play(); //安卓手机可以直接播放
// 为iOS做兼容,为了保险起见,触摸事件都给他加上
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
var noPlay = true;
$('html').one('touchstart',function(){
if(noPlay) {
audio.play();
noPlay = false;
}
})
$('html').one('touchmove',function(){
if(noPlay) {
audio.play();
noPlay = false;
}
})
$('html').one('touchend',function(){
if(noPlay) {
audio.play();
noPlay = false;
}
})

到这里背景音乐已经可以播放了,但是对于用户体验不够好,如果我不触摸页面的话还是不会播放,如果你有更好的办法,可以加我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. python语法基础-网络编程-TCP协议和UDP协议

    ###############    网络编程    ############## """ 网络编程 学习了Python基础之后,包括函数,面向对象等,你就可以开发了,你 ...

  2. 熊海CMS_1.0 代码审计

    熊海是一款小型的内容管理系统,1.0版本是多年前的版本了,所以漏洞还是比较多的,而且审计起来难度不大,非常适合入门,所以今天我进行这款cms的代码审计.程序安装后使用seay源代码审计系统打开,首先使 ...

  3. jsp页面之间传中文参数显示乱码问题的解决

    最近在项目中遇到jsp页面通过url传递参数,出现乱码,但是在本地是正常显示,在服务器上却是乱码,找了好久都没找到解决方法,最终在大神的帮助下解决了这个问题 比如从a.jsp像b.jsp页面传递参数 ...

  4. Spring Boot Admin最佳实践

    本文不进行Spring Boot Admin入门知识点说明 在Spring Boot Actuator中提供很多像health.metrics等实时监控接口,可以方便我们随时跟踪服务的性能指标.Spr ...

  5. 康耐视软件VisionPro-max-u与VisionPro-plus-u的区别

    康耐视软件VisionPro-max-u与VisionPro-plus-u的区别 1.VisionPro-plus-u为基础版可以直接运用该软件包的算法,拖拽式的窗口程序 2.VisionPro-ma ...

  6. 【Linux_Shell 脚本编程学习笔记五、Oracle JDK1.8 安装shell 脚本】

    脚本使用说明: 首先在脚本的同级目录下有个 jdk的安装包 脚本和安装包必须在同级目录下才能够安装(脚本没有优化,还可以使用  wget  从网上下载指定版本的  jdk 安装包) #!/bin/sh ...

  7. cs231n spring 2017 lecture2 Image Classification

    1. 相比于传统的人工提取特征(边.角等),深度学习是一种Data-Driven Approach.深度学习有统一的框架,喂不同的数据集,可以训练识别不同的物体.而人工提取特征的方式很脆弱,换一个物体 ...

  8. HttpClient学习笔记

    HttpClient相关的实体类官方文档地址:http://hc.apache.org/httpcomponents-client-ga/httpclient/apidocs/ 使用HttpClien ...

  9. ZOJ-1177-K-Magic Number

    就是分别以1到9作为开头构造结果,取最小答案.看了参考书之后才做出来,对参考书上的代码进行了一些改进 Accepted 1177 C++11 0 408 #include "bits/std ...

  10. rancher2.0快速入门

    注意:本入门指南的目的是让您快速的运行一个Rancher2.0环境,它不适用于生产.有关更全面的说明,请查阅Rancher安装. 本教程将指导您完成: 安装Rancher v2.0 : 创建第一个集群 ...