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

我记得之前在一次项目中,出现过浏览报错:

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

当时的文档链接如右:【解决】HTML5新标签audio的autoplay自动播放属性失效的解决方案

所以在这次H5的制作中,我使用了iframe来加载音频文件,使用这种方式后,电脑端是没有问题的,但是当上传至服务器上在手机上浏览时,会出现点击音乐旋转按钮无法暂停播放音乐(使用iframe之后相当于一个子文档#document,但是我也找到方法获取子文档中的audio元素了,但是不知道为什么点击按钮后,暂停播放功能无法生效)、ios浏览器中音乐无法自动播放...等等问题

然后迫不得已,我重新换成了audio标签,然后重新载浏览器中运行,果然出现了第一次项目中的报错信息,但是很莫名的是,手机端居然能够正常自动播放音乐了,除了ios微信端(因为是H5页面,所以只测了微信,但是安卓的微信浏览器和其它浏览器是可以的)。

那么接下来就是要解决ios微信端无法自动播放的问题。

百度了很多方法,如下:

1、js中当文档加载完毕后,获取audio元素,然后调用audio.play()方法:

window.load = function(){
  const audio = document.getElementByTagName(‘audio‘)[0];
  audio.play();     
}

运行结果:无效。报错Uncaught(in promise) DOMException

2、有小伙伴说明,ios为了节省用户流量等,对于自动播放中块管控很严格,必须要用户交互后才可以调用audio.play()方法。所以我们就添加了触摸屏幕的事件:

document.addEventListener(‘touchstart‘, function () {
  if (key) {
    audio.play();
    audio.loop = true;
    key = false;
  }
})

运行结果:不能根本解决。相当于就是要通过用户触摸屏幕后才能播放音乐,但这个是治标不治本,如果用户没有一打开就触摸屏幕,那就会一很长一段时间都没音乐。

3、WeixinJSBridge接口解决微信中时候视频和音频自动播放问题:

function audioAutoPlay(id) {
  let audio = document.getElementById(id); // 并不一定非要用ID获取,class值获取也可以
  audio.play(); // 为了保险起见 这里页也手动调用一下
  audio.loop = true; // 如上 为了音乐能够循环播放
  document.addEventListener("WeixinJSBridgeReady", function () {
    audio.play();
    audio.loop = true;
  }, false);
  document.addEventListener(‘YixinJSBridgeReady‘, function () { // 暂时还不知道Yixin是什么东西...
    audio.play();
    audio.loop = true;
  }, false);
}
audioAutoPlay(id); // 传入audio标签的id值

运行结果:解决。这个是微信场景专门提供的api方法,可以解决ios中音视频不能自动播放背景音乐的bug...

不过这个也还是有一点问题,就是总感觉ios比安卓背景音乐播放反应有点迟钝。安卓基本一打开就有音乐,但是ios差不定多要等三秒左右,也不知道是什么问题...

 

 【补充知识】

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

 

 【参考网址】

在微信中使用audio播放音频和视频

 

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

上一篇:vue中的绑定class和微信小程序中的绑定class的区别


下一篇:ESA2GJK1DH1K微信小程序篇: 小程序连接MQTT简单的Demo