前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了。期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题。

个人感觉吧,egret自己封装的audio还是不太健壮。群里,社区呼声一片,相信前端的很多人都碰到过这个问题。而网上随便search一下答案很快就出来了。这里就先copy一份答案吧。

  1. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  1. // 方法1: 微信JS-SDK, 不推荐使用"野生"方式, 因为不知道什么时候就可以不能用了!
  2. // http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
  3. // 通过config接口注入权限验证配置后, 在 ready 中 play 一下 audio
  4. function autoPlayAudio1() {
  5. wx.config({
  6. // 配置信息, 即使不正确也能使用 wx.ready
  7. debug: false,
  8. appId: '',
  9. timestamp: 1,
  10. nonceStr: '',
  11. signature: '',
  12. jsApiList: []
  13. });
  14. wx.ready(function() {
  15. document.getElementById('bgmusic').play();
  16. });
  17. }
  18. // 方法2: "野生"方法, 借用原来老的 WeixinJSBridge
  19. function autoPlayAudio2() {
  20. window.onload = function() {
  21. // alert(typeof WeixinJSBridge);
  22. WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
  23. // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
  24. // alert(e.err_msg);
  25. document.getElementById('bgmusic').play();
  26. });
  27. };
  28. }
  29. // 大家或多或少都知道 iOS Safari 不允许自动播放 audio, 可能已经被坑过了,
  30. // 但微信内嵌的浏览器应该是做了一些定制化, 允许自动播放 audio.
  31. // 测试了以下机型在微信内嵌浏览器中仅需设置 audio autoplay 即可自动播放(audio)音乐, 无需特殊处理.
  32. // * iPhone5 iOS 7.0.6 WeChat 6.2
  33. // * iPhone5s iOS 8.1.2 WeChat 6.3.7
  34. // * iPhone6Plus iOS 8.1.3 WeChat 6.3.7
  35. // * MI1S Android 4.1.2 WeChat 6.3.7
  36. //
  37. // 但是当手机是 iPhone6s iOS 9.1 WeChat 6.3.7 时, 必须做如下特殊处理才能在微信中自动播放(audio)音乐,
  38. // 我可以推测是 iOS 9 的兼容性问题么?
  39. //
  40. autoPlayAudio1(); // 推荐使用方法1
  41. // autoPlayAudio2(); // 也可以试一试方法2
  42.  
  43. 那么在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);
                                   }
                                 }

  1. 原谅代码的缩进有些恶心,粘贴过来的就这样了。接下来,我们怎么在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();
                                                                  }
                                                      }
                                           }....

  1. 首先在实例化SoundMenager的时候要先加载音乐。等待加载完毕后会先通过我们前面在window环境在添加的一个方法window["playsound"]去播放一段静音去触发音频播放。
    为什么不直接播放bgm呢,我发现在window["playsound"]中return出的一个egret.SoundChannel对象不可用,ts这边是undefined。所以就先通过静音触发,再播放可以控制的背景音乐。
  1.  

egret 篇——关于ios环境下微信浏览器的音频自动播放问题的更多相关文章

  1. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  2. ios端微信浏览器 音乐不自动播放问题

    <audio id=''music src='' preload autoplay loop> <script src="http://res.wx.qq.com/open ...

  3. ios下微信浏览器如何唤醒app?app已上架应用宝

    android下可以通过在应用宝微下载地址后面加参数&android_schema='应用schema'来实现,ios下如何实现? ios下微信浏览器如何唤醒app?app已上架应用宝 > ...

  4. 解决ios下的微信页面背景音乐无法自动播放问题

    在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...

  5. 【bug解决】ios微信浏览器中背景音乐无法播放

    我记得之前在一次项目中,出现过浏览报错: 当时的文档链接如右:[解决]HTML5新标签audio的autoplay自动播放属性失效的解决方案 所以在这次H5的制作中,我使用了iframe来加载音频文件 ...

  6. iphone微信 h5页音乐自动播放

    iphone微信 h5页音乐自动播放: // iphone自动播放 document.addEventListener("WeixinJSBridgeReady", functio ...

  7. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  8. 微信的audio无法自动播放的问题

    一.问题 最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去. 1.在audio标签里引入了autoplay属 ...

  9. 微信h5,背景音乐自动播放

    移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...

随机推荐

  1. python3没有urllib2 出现报错:语法错误

    我的代码:import sklearn.datasets bug: 法错误. 我的原因:Python3运行的时候的运行了你下载的urllib2.py文件,而这个文件是不属于Python3的. 解决办法 ...

  2. [BOI2003]团伙

    题目描述 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是: 我朋友的朋友是我的朋友: 我敌人的敌人也是我的朋友. 两个强盗是同一团伙的 ...

  3. HDU 2874 /// tarjan离线求森林里两点的距离

    题目大意: 在一个森林里 询问 u v 两点 若不能到达输出 "Not connected" 否则输出两点距离 https://blog.csdn.net/keyboarderqq ...

  4. css之页面三列布局之左右上下高度固定,中间自适应

    第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...

  5. 【CSP-S/J 2019】初赛注意事项

    UPD:10-25-13:33 正式成绩出了,省里500多名应该进了吧... UPD:10-20-10:07 现在又很慌啊,怎么感觉82又一点都不稳啊... 然后现在又不太想写文化课作业...我是不是 ...

  6. linux 服务器安装mysql5.6

    1.移除CentOS默认的mysql-libs: whereis mysql 2.为了避免冲突,先移除CenttOS上默认的mysql-libs: yum remove mysql-libs 3.然后 ...

  7. 在egg.js中使用mongodb

    1.egg.js官网只推荐了mysqle,要用mongodb得另找资料.通过查找,大家都在用Mongoose连接,于是乎学习. 网站链接:https://www.npmjs.com/package/e ...

  8. Python自学:第五章 使用函数range( )

    # -*- coding: GBK -*- for value in range(1,5): print(value) 输出为: 1 2 3 4

  9. 免费带你体验阿里巴巴旗舰大数据计算产品MaxCompute

    什么是MaxCompute? 众所周知,MaxCompute是阿里云推出的承载EB级的数据存储能力,百PB级的单日计算能力,公共云覆盖国内外十几个国家和地区,专有云包含城市大脑在内部署超过100+套的 ...

  10. type元类创建类的方法

    一.代码 class_name='car' dict_name={} bases=(object,) class_body=''' def __init__(self,name): self.name ...