资讯专栏INFORMATION COLUMN

H5的audio在ios系统的微信上不能自动播放的问题

CKJOKER / 1362人阅读

摘要:前几天有个需求,要在页面中添加背景音乐,本以为很却也踩了一些坑,废话不多说,进入正题撸完代码测试的时候才发现在安卓手机上背景音乐可以正常播放,但在里的微信和中不能播放查了很多资料,原来是微信的锅,微信的是建立在微信内置浏览器的私有对象上,在

前几天有个需求,要在H5页面中添加背景音乐,本以为很easy,却也踩了一些坑,废话不多说,进入正题:
撸完代码测试的时候才发现在安卓手机上背景音乐可以正常播放,但在iphone里的微信和safari中不能播放!

查了很多资料,原来是微信的锅,微信的js api是建立在微信内置浏览器的私有对象WeixinJSBridge上,在微信中打开页面的话会初始化这个对象,当这个对象准备好的时候,会抛出WeixinJSBridgeReady这个事件,我们在这个事件的回调中可以播放音乐,直接上代码:

*html*

     

*js*

    var bgAudio = document.getElementById("bg-audio");
    bgAudio.load();
    bgAudio.play();
    // 兼容在微信里自动播放
    document.addEventListener("WeixinJSBridgeReady", function () {
        bgAudio.load();
        bgAudio.play();
    }, false);
    

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92154.html

相关文章

  • 移动端 h5 ios不能自动播放音乐问题

    摘要:如果我们想要在一个页面自动播放背景音乐或是其他音频,比如是没办法调用事件直接调用,非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法情况我们知道安卓是可以直接调用音频的事件的,不行。 如果我们想要在一个页面自动播放背景音乐或是其他音频,比如ios是没办法调用audio.play()事件直接调用,非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法....

    verano 评论0 收藏0
  • 微信h5页面audio标签ios不能自动播放

    摘要:背景介绍在一个页面中当用户提交表单到后台后台返回的结果成功的话开始自动播放背景音乐出现的问题在安卓手机上正常中没有反应后来网上一番搜索后了解到时因为不允许自动播放音乐除非用户做出了交互行为解决方案如果是在页面刚加载就需要自动播放音频的话还是 背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反...

    jlanglang 评论0 收藏0
  • 微信h5页面audio标签ios不能自动播放

    摘要:背景介绍在一个页面中当用户提交表单到后台后台返回的结果成功的话开始自动播放背景音乐出现的问题在安卓手机上正常中没有反应后来网上一番搜索后了解到时因为不允许自动播放音乐除非用户做出了交互行为解决方案如果是在页面刚加载就需要自动播放音频的话还是 背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反...

    jsliang 评论0 收藏0

发表评论

0条评论

CKJOKER

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<