文档章节

关于H5页面背景音乐播放的问题

风中一匹哈士奇
 风中一匹哈士奇
发布于 2017/08/22 08:21
字数 1315
阅读 43
收藏 0

起因:这是一个嵌入到APP里的H5页面,都是一些相册集模板,用户添加照片,放到模板里,可以生成记忆链,然后进行播放。但是由于APP都是去调用自带的浏览器,以及安卓去调用自己生成的浏览器,导致了页面在iOS以及部分安卓上面无法自动播放背景音乐。

一开始接到这个任务的时候感觉没啥,因为这个东西在以前的时候就做过,每太在意,但是这次突然发现不行了,在本地测试的时候iOS不能播放,安卓倒是没问题,到了实体机测试的时候就完蛋了,全军覆没,所以就要去找问题原因以及解决方案。

首先我想到的是,是不是标签问题,以及兼容性等问题,所以我就写了一段js去判定当前音乐是否播放,没有的话就开始播放,这里贴出代码:

$(function(){

var media = document.getElementById('audio');

media.src = "bgm/See You Again.mp3";

media.play();

var flag = true;

     $('#music').click(function(){

     if(flag == true){

     $(this).removeClass('on').addClass('off');

     flag = false;

     $('#audio').get(0).pause();

     }else{

     $(this).removeClass('off').addClass('on');

     flag = true;

     $('#audio').get(0).play();

     }

     })

})

这里用media.src = "bgm/See You Again.mp3";强制注入路径,是因为iOS对静态标签src这个标签的支持并不是很友好,然后后面就进行了判定,结果发现,部分安卓的问题解决了,但是在iOS上依旧不行。

这时候就尝试着换一下思路试试,为什么产生这种问题,以前就可以,现在怎么不行了。然后第一个想到的就是iOS的版本问题,然后就去网上看了一下,果然是,从iOS9之后就出现这个问题了,也包括安卓的不断升级,为了节省用户的流量,安卓跟ios都默认不允许开发者进行自动播放,除非用户进行页面操作,这也就是说,说白了就是想要播放,就要怼一下这个页面,点击啦,滑动什么的。

但是我偏偏不信,所以就尝试着各种方法,一个是延时播放,就是加一个定时器,1秒或者零点几秒后播放,结果失败,这里就不贴出代码了。第二个就是模拟点击事件,在加载页面的时候,模拟一个click(),结果同上T_T。后面我又尝试了事件绑定等等,结果都不行,果然是干不过人家浏览器呀。

不过也是略有收获,就是在微信浏览器里还是没问题的,那就是监听WeixinJSBridgeReady事件、DOMContentLoaded事件

微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady"

并且发现部分机型,监听DOMContentLoaded和load事件,在回调中也可以播放音乐;

所以,为了保险起见,可以同时监听两个事件,以增强其适用性。

这里贴出代码:

<audio id="car_audio" src="bgm/See You Again.mp3" ></audio>

document.addEventListener('DOMContentLoaded', function () {

    function audioAutoPlay() {

        var audio = document.getElementById('car_audio');

            audio.play();

        document.addEventListener("WeixinJSBridgeReady", function () {

            audio.play();

        }, false);

    }

    audioAutoPlay();

});

 

然后,又继续找了找,找到了第二种方案,这里也贴上代码:

<audio   id="car_audio" src="bgm/See You Again.mp3" loop></audio>  

      document.getElementById('car_audio').play();  

    document.addEventListener("WeixinJSBridgeReady", function () {  

            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {  

                document.getElementById('car_audio').play();  

            });  

      }, false);  

经测试证明,这两种方案完全可行,在微信浏览器里没有问题,在实体机测试,能兼容所有iOS设备以及安卓设备。

尽管这样还是没有满足在所有浏览器以及APP内部自动播放,客户还是不满意,必须要求自动播放。尽管我们心里明白,iOS那边必须要有一个强制事件才能触发,但是客户根本不去想这些。在解决问题的同时,也不断的去找一些大企业以及BAT这样的公司的页面,一是来佐证这个想法,二是可以看看人家怎么做的。事实证明,这个问题都存在,其实这个问题也不能算是bug,只是浏览器的一种保护机制。

最后我们想了一种方案,就是跟iOS以及安卓那边配合开发,由后台提供开始,暂停,播放方法,我们前端这边去传参数和调用,就是把音乐的链接,以及标签的ID,传给后台,后台返回方法名,然后去调用,经过好久的调试,终于能在APP里播放了,同时也证明这种方法是可行的。

最后的代码,因为牵扯的东西略多就不贴出来了,但是思路,以及过程就是这样。最后调页面的时候,由于用到了swipe,就出现了事件穿透这个问题,当时还懵了一下,就赶紧临时抱佛脚去学了一下,等之后可以分享一下。

如果有大神看到这个东西的话,有不对的地方请指出,非常感谢!

© 著作权归作者所有

风中一匹哈士奇
粉丝 4
博文 8
码字总数 7492
作品 0
昌平
程序员
私信 提问
使用HTML5播放音频在移动端不能循环

做了一个H5页面,需要一个mp3做为背景音乐,在PC端调试没问题,然后用手机扫码打开结果就不能循环播放,记录踩过的坑 最开始是这样的 PC端没问题,无限循环播放,可是手机端就只播放一遍,各...

梦想修补师
2017/10/26
0
0
H5横屏布局+清除移动端浏览页面后的缓存问题

最近有幸接到一个 H5 的活,周五谈好需求,说下周一就要效果出来,乍一看挺简单的,但是做起来就不是那么回事了。接下来说说我的踩坑之路。 一、页面里面要求有一条会自动延长的不规则曲线,...

刘飞_
2017/11/25
0
0
Cocos2d-x中播放背景音乐

背景音乐的播放与停止实例代码如下: [html] view plaincopy SimpleAudioEngine::getInstance()->playBackgroundMusic("sound/Jazz.mp3", true); SimpleAudioEngine::getInstance()->stopBac......

智捷课堂
2014/08/04
0
0
Cocos2d-JS使用CocosDenshion引擎

Cocos2d-JS提供了一个音频CocosDenshion引擎。具体使用的API是cc.AudioEngine。cc.AudioEngine有几个常用的函数: playMusic(url, loop)。播放背景音乐,参数url是播放文件的路径,参数loop控...

智捷课堂
2015/04/06
0
0
Cocos2d-x中停止播放背景音乐

停止背景音乐播放代码放置到什么地方比较适合呢?例如:在HelloWorld场景中,主要代码如下: [html] view plaincopy bool HelloWorld::init() { return true; } void HelloWorld::onEnter() ...

智捷课堂
2014/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

佳博标签打印问题-

由于网页打印不行,要么sdk 写成activex,这样浏览器支持又有局限。 因此,采用客户端编写打印服务启动,定时轮询服务端打印队列,从服务的获取打印队列进行打印。 服务端web 点击打印,讲打...

mellen
20分钟前
2
0
Jmeter利用JMXMon插件监控服务器JVM情况

1、Jmeter下载JMXMon插件 2、Jmeter 添加 JMXMon请求 远程监控JVM状态需要在JVM启动时候加上一段参数才行,在tomcat bin目录下找到catalina.sh 在# OS specific support. $var _must_ be set...

覃光林
21分钟前
3
0
Qt编写安防视频监控系统(界面很漂亮)

一、前言 视频监控系统在整个安防领域,已经做到了烂大街的程序,全国起码几百家公司做过类似的系统,当然这一方面的需求量也是非常旺盛的,各种定制化的需求越来越多,尤其是这几年借着人脸...

飞扬青云
25分钟前
3
0
Python的requests库中的Put方式使用

1.后端接口 @PutMapping public ResponseEntity<MyObject> putMyObject( @RequestBody MyObject myObject) { ... } Put请求参数在请求体里面。 1.前端请求 import requestsimpo......

亚林瓜子
26分钟前
1
0
全站加速(DCDN)- IP应用加速产品解读

5月22日下午15点,阿里云全站加速(DCDN)-IP应用加速如期发布。IP应用加速是阿里云自主研发的一款更高效、更安全、更便捷的动态加速产品,结合阿里云CDN本身的资源优势,利用就近接入、智能...

迷你芊宝宝
30分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部