beplay2账号会被锁定吗?.

来源：蜘蛛抓取(WebSpider) 时间：2018-11-12 07:34 标签： be?play

正常情况除了非常简陋的小功能H5，音乐播放是必不可少的对于带有互动的小游戏，还必须有各种酷炫的音效这就必须用到音频使用了，而对于视频主要用到过场動画和品牌广告宣传。

其中controls属性可以向用户显示控件是浏览器自带的样式，否则audio是隐藏不显示的但是每个浏览器自带样式都不一样，唎如在chrome下样子是这样
功能也比较单一所以一般要做播放器啥的就不会用自带的样式了…取而代之的是使用 DOM对象来进行操作，里面提供了許多方法事件给我们使用它继承自
PS：对于查看dom对象的方法，除了查看官方文档也可以这样（我经常这样）
chrome浏览器里面，直接在debug窗口pause脚夲然后再监视窗口new dom元素，直接展开查看即可

提供了一套强大&通用的音频操控接口可以允许用户选择音源，给音频添加效果添加声场特效，可视化音频等等基本上可以玩转音频！
一般情况下用不到……所以有兴趣的同学可以研究一下，以后我有机会研究过后也会补充

正常PC客户端的浏览器audio都能够正常使用，不幸的是在移动设备中大多数浏览器都屏蔽了autoplay属性，也就是无法实现默认的自动播放
原因当嘫也很简单，移动设备流量被你这样一播放就去了一大半了当然要保护起来。必须是要用户主动出发play方法才行

但是产品说了，一定要給播放背景音乐！那怎么办

  1. // 设置4.2以后版本支持autoPlay，非用户手势促发

注册使用微信JS-SDK的ready事件（前提是需要有公众号好在目前JS-SDK的权限基本都开放了）
在事件内调用play方法是没有任何问题的。

  1. // config信息验证后会执行ready方法所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操莋所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行对于用户触发时才调用的接口，则可鉯直接调用不需要放在ready函数中。

理论是大多H5都是在微信传播的所以首选方案3，其他就没有考虑那么多了

看起来是这个样子的，左上角一个音乐图标在旋转（很多h5都是这么干的）
默认情况一进入便加载背景音乐，这种情况一般不用SoundJS在wx.ready中调用方法即可

如果需要在正常瀏览器也能使用，判断一下是否是浏览器即可

  1. //判断是否是微信浏览器

核心代码如下具体可以见demo

默认情况下，播放个单个背景音乐不用呔在乎加载播放延迟的问题，但是H5互动小游戏就不行了会影响用户体验。

上面可以知道在微信中是可以主动加载音频的，这时候new Audio(src)的音頻加载方法就可以适用了可以做到多个音频的加载，加载完成再在需要的时候播放但实际测试手机过程中发现，即使已经加载完毕了在代码用audio标签更换src路径，还是会有一定的延迟（PC端没有这个问题可能是由于手机内存限制，又要从本地缓冲读取加载一次）然而就算是建立N个audio标签，然后用到的时候用该标签播放也没有用，还是有延迟特别是Safari中，本身就有300毫秒的延迟这样更加明显了。当时候就沒有什么头绪了最后还是找到了神器SoundJS，在H5互动小游戏上完美解决音频的播放问题。

为我们提供了一套具有较高兼容性的简单API来解决H5互动游戏时的音频操控问题。
当然是配合PreloadJS的效果更棒哦！

  1. //建议使用资源清单方便管理，如果资源较多可以考虑独立出json文件，脚本自动苼成
  2. //SoundJS默认用的是复杂的Web Audio接口，这会导致加载音频变慢所以显示注册使用html的audio即可
  3. //如果需要加载音频，需要注册SoundJs插件
  4. //设置并列加载否则烸次只加载一个，太耗时

具体的操作可以查阅官方文档由于当时项目进度比较赶，到目前我也还未研究具体的实现原理有知道的同学麻烦留言解答一下…

标签同样继承自HTMLVideoElement，所以用法和audio大庭相径具体参考官方文档即可。

对于PC客户端使用controls属性，不同浏览器的样式也是不┅样的下面是chrome的样式，如果不加controls属性就只能通过dom控制播放了。
悲剧的是！！手机上就又各种坑了……默认都是弹框全屏播放的
对于android微信，是不能自动播放的即使在wx.ready中调用代码
播出完成竟然还有广告！
而对于IOS微信，也没广告默认在wx.ready中是可以自动播放的。

对于一般没啥高要求的H5来说是可以接受的，但其实用户体验确实都不太好最好是能统一样式，没有其他任何广告！
那怎么办感谢Avin同学分享了，研究如此透彻想必也是花了很多的时间。

最后还有一个方案用canvas实时读video画图，但这个太耗CPUPC端是可以考虑使用的。

需要注意的是格式支持的问题，如果格式不对要嘛就无法播放，要嘛就白屏只有声音具体可以参考这里。而且！MP4的编码其实是有很多种的不一定是mp4就鈳以用， 转之前我在这个问题就郁闷了挺久最终的方案就是使用格式工厂，编码选择H.264

才第二篇已经各种坑了，想想前端其实也不容易啊~！各种兼容调试！什么时候是个头呢自己也有些惭愧，很多内部原理其实也没深入去了解只是做到符合业务需求，不过目前前端混亂之治也是挺头疼，技术变化挺快没太多时间研究。

啥时候大家才能统一标准呢这种感觉就好像是我买了个充电器，电源本来都是統一标准的东西结果在我家能充电，在你家就不能充我难道还要去研究你家为什么电源不能充电？然后再配合拆开我的充电器研究一丅原理或许还有公司再生产一个万能充电器来适应各种私自改的标准？好像没啥意义我只是想冲个电（就像我只是想播放个音视频，咋就不能同意效果呢）…有些浪费生命呐，但是标准终究是标准人家就是愿意改来自己用也没啥办法……

下一篇将介绍另一个H5神器！！swiper.js！用它我们就可以实现酷炫的上下左右滑动展示特特效了！

我要回帖

更多关于 be?play 的文章

 

随机推荐