egret 篇——关于ios环境下微信浏览器的音频自动播放问题
前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了。期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题。
个人感觉吧,egret自己封装的audio还是不太健壮。群里,社区呼声一片,相信前端的很多人都碰到过这个问题。而网上随便search一下答案很快就出来了。这里就先copy一份答案吧。
- <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
- // 方法1: 微信JS-SDK, 不推荐使用"野生"方式, 因为不知道什么时候就可以不能用了!
- // http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
- // 通过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();
- });
- }
- // 方法2: "野生"方法, 借用原来老的 WeixinJSBridge
- function autoPlayAudio2() {
- window.onload = function() {
- // alert(typeof WeixinJSBridge);
- WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
- // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
- // alert(e.err_msg);
- document.getElementById('bgmusic').play();
- });
- };
- }
- // 大家或多或少都知道 iOS Safari 不允许自动播放 audio, 可能已经被坑过了,
- // 但微信内嵌的浏览器应该是做了一些定制化, 允许自动播放 audio.
- // 测试了以下机型在微信内嵌浏览器中仅需设置 audio autoplay 即可自动播放(audio)音乐, 无需特殊处理.
- // * iPhone5 iOS 7.0.6 WeChat 6.2
- // * iPhone5s iOS 8.1.2 WeChat 6.3.7
- // * iPhone6Plus iOS 8.1.3 WeChat 6.3.7
- // * MI1S Android 4.1.2 WeChat 6.3.7
- //
- // 但是当手机是 iPhone6s iOS 9.1 WeChat 6.3.7 时, 必须做如下特殊处理才能在微信中自动播放(audio)音乐,
- // 我可以推测是 iOS 9 的兼容性问题么?
- //
- autoPlayAudio1(); // 推荐使用方法1
- // autoPlayAudio2(); // 也可以试一试方法2
- 那么在egret 中怎么比较好的去实现打包h5之后,ios微信浏览器自动播放呢?这里就参考了一下前端的方法,还是贴代码比较好解释吧。
1:在html模板中的body标签前面添加一段js,注意是body前面;
function playsound(sound,loop){
if(sound == null){
console.log('sound err')
return;
}
var times = loop?0:1;
if(typeof WeixinJSBridge != 'undefined'){
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
return sound.play(0,times);
});
}else{
return sound.play(0,times);
}
}
- 原谅代码的缩进有些恶心,粘贴过来的就这样了。接下来,我们怎么在ts中调用呢?
class SoundMenager {
public constructor() {
//加载资源
this.loadMusic();
if (SoundMenager.getIsSound()) {
//静音引导后播放可以控制的背景音乐
setTimeout(() => {this.nullAudio.addEventListener(egret.Event.COMPLETE, function loadOver(event:egret.Event) {window["playsound"](this.nullAudio, false)
}, this);
}}, 800);
setTimeout(()=>{this._bgm.addEventListener(egret.Event.COMPLETE, function loadOver(event:egret.Event) {this.PlayBgMusic
();
}, this);
},1000);
}
}
public PlayBgMusic(){
this._bgm_channel=this._bgm.play(0, -1);
}
//背景音乐开关
public StopBgmusic() {
this._bgm_channel.stop();
}
//播放音乐
public PlayMusic(audio: egret.Sound, loop: Boolean = false, callback?: any) {
let betGoldChannel: egret.SoundChannel;
if (SoundMenager.getIsSound()) {
betGoldChannel =audio.play(0,1);
if (callback) {
betGoldChannel.addEventListener(egret.Event.SOUND_COMPLETE, () => { callback(); }, this);
}
}else{
if(callback){
callback();
}
}
}....
- 首先在实例化SoundMenager的时候要先加载音乐。等待加载完毕后会先通过我们前面在window环境在添加的一个方法window["playsound"]去播放一段静音去触发音频播放。
为什么不直接播放bgm呢,我发现在window["playsound"]中return出的一个egret.SoundChannel对象不可用,ts这边是undefined。所以就先通过静音触发,再播放可以控制的背景音乐。
egret 篇——关于ios环境下微信浏览器的音频自动播放问题的更多相关文章
- html5 video微信浏览器视频不能自动播放
html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...
- ios端微信浏览器 音乐不自动播放问题
<audio id=''music src='' preload autoplay loop> <script src="http://res.wx.qq.com/open ...
- ios下微信浏览器如何唤醒app?app已上架应用宝
android下可以通过在应用宝微下载地址后面加参数&android_schema='应用schema'来实现,ios下如何实现? ios下微信浏览器如何唤醒app?app已上架应用宝 > ...
- 解决ios下的微信页面背景音乐无法自动播放问题
在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...
- 【bug解决】ios微信浏览器中背景音乐无法播放
我记得之前在一次项目中,出现过浏览报错: 当时的文档链接如右:[解决]HTML5新标签audio的autoplay自动播放属性失效的解决方案 所以在这次H5的制作中,我使用了iframe来加载音频文件 ...
- iphone微信 h5页音乐自动播放
iphone微信 h5页音乐自动播放: // iphone自动播放 document.addEventListener("WeixinJSBridgeReady", functio ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- 微信的audio无法自动播放的问题
一.问题 最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去. 1.在audio标签里引入了autoplay属 ...
- 微信h5,背景音乐自动播放
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...
随机推荐
- python3没有urllib2 出现报错:语法错误
我的代码:import sklearn.datasets bug: 法错误. 我的原因:Python3运行的时候的运行了你下载的urllib2.py文件,而这个文件是不属于Python3的. 解决办法 ...
- [BOI2003]团伙
题目描述 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是: 我朋友的朋友是我的朋友: 我敌人的敌人也是我的朋友. 两个强盗是同一团伙的 ...
- HDU 2874 /// tarjan离线求森林里两点的距离
题目大意: 在一个森林里 询问 u v 两点 若不能到达输出 "Not connected" 否则输出两点距离 https://blog.csdn.net/keyboarderqq ...
- css之页面三列布局之左右上下高度固定,中间自适应
第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...
- 【CSP-S/J 2019】初赛注意事项
UPD:10-25-13:33 正式成绩出了,省里500多名应该进了吧... UPD:10-20-10:07 现在又很慌啊,怎么感觉82又一点都不稳啊... 然后现在又不太想写文化课作业...我是不是 ...
- linux 服务器安装mysql5.6
1.移除CentOS默认的mysql-libs: whereis mysql 2.为了避免冲突,先移除CenttOS上默认的mysql-libs: yum remove mysql-libs 3.然后 ...
- 在egg.js中使用mongodb
1.egg.js官网只推荐了mysqle,要用mongodb得另找资料.通过查找,大家都在用Mongoose连接,于是乎学习. 网站链接:https://www.npmjs.com/package/e ...
- Python自学:第五章 使用函数range( )
# -*- coding: GBK -*- for value in range(1,5): print(value) 输出为: 1 2 3 4
- 免费带你体验阿里巴巴旗舰大数据计算产品MaxCompute
什么是MaxCompute? 众所周知,MaxCompute是阿里云推出的承载EB级的数据存储能力,百PB级的单日计算能力,公共云覆盖国内外十几个国家和地区,专有云包含城市大脑在内部署超过100+套的 ...
- type元类创建类的方法
一.代码 class_name='car' dict_name={} bases=(object,) class_body=''' def __init__(self,name): self.name ...