解决ios下的微信打开的页面背景音乐无法自动播放

后面的项目发现,还有两个坑,需要注意下:

·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监听这个事件来触发的。那有个坑就是 如果微信已经ready了,但还没执行到你监听这个ready事件的代码,那么你的监听是没用的,所以最理想的情况是,监听的js放在head前面(放在css外链之前),确保最新执行,切记!切记!。

·另一个坑就是,本文的解决方案只适合一开始就播放的背景音乐。如果你是做那种微信场景(打开页面模拟收到很多条微信,每条微信都要播放那段音效),实际上本文的解决方案是不行的。因为ready的事件只会执行一次,即使你在ready事件里面用setTimeout或者setInterval也可能会导致丢失情况。

-----------------------------------------------------------

前言

在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求。我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的。直到微信火爆起来,我们发现IOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了我之前的认知。但是,但是。。。最近的项目,又发现了一个头疼的问题。部分的IOS微信,打开有自动播放背景音乐的页面没有声音!!最头疼的是同款机子,相同的IOS系统,相同的微信版本!!没错,前端就是要经常这么折腾的,同一个问题,你以为找到了最终的解决方案,但是各种浏览器更新快速,昨天没问题,也许今天就有问题了。还好,这个问题暂时找到原因了,详情请看下文。

解决方案

先看下平时使用audio标签插入背景音乐的代码:

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" autoplay preload loop="loop"></audio >

正常来说,上面的写法在安卓和大部分IOS机子的微信是可以播放的(safari这里就忽略讨论),可以扫一扫demo测试下你的手机:

如果上面的demo,你的ios微信可以播放,说明你的是大部分正常的手机。如果不能播放,哈哈,你成为了少部分不能正常播放的幸运者。。。

那代码有办法解决这少部分用户呢?如何解决呢?

答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件,测试发现,上面说的少部分的机子微信只要做微信ready后执行播放,就可以用代码实现自动播放功能了!具体代码请看下面:

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio >

function audioAutoPlay(id){

    var audio = document.getElementById(id);

    audio.play();

    document.addEventListener("WeixinJSBridgeReady"function () {

            audio.play();

    }, false);

}

audioAutoPlay(‘Jaudio‘);

刚才如果你第一个demo不能播放的童鞋可以再扫一扫测试下(如果第一个demo已经测试正常的,这个肯定是正常的啦)

是不是听到声音了呢?!!解决方案就是这么简单。

后语

总结下吧,关于音乐自动播放的问题,现在可以分为三种:

1-支持audio的autoplay,大部分安卓机子的自带浏览器和微信,大部分的IOS微信(无需特殊解决)

2-不支持audio的autoplay,部分的IOS微信(本文提供的解决方案)

3-不支持audio的autoplay,部分的安卓机子的自带浏览器(比如小米,开始模仿safari)和全部的ios safari(这种只能做用户触屏时就触发播放了)

那么针对已知的三种情况,关于自动播放背景音乐的问题,我们来总结一下综合解决方案代码吧:

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio >

function audioAutoPlay(id){

    var audio = document.getElementById(id),

        play = function(){

        audio.play();

        document.removeEventListener("touchstart",play, false);

    };

    audio.play();

    document.addEventListener("WeixinJSBridgeReady"function () {//微信

       play();

    }, false);

    document.addEventListener(‘YixinJSBridgeReady‘function() {//易信

              play();

        }, false);

    document.addEventListener("touchstart",play, false);

}

audioAutoPlay(‘Jaudio‘);

时间: 2024-10-02 21:46:13

解决ios下的微信打开的页面背景音乐无法自动播放的相关文章

【转】一种解决h5页面背景音乐不能自动播放的方案

原文:http://www.cnblogs.com/wmhuang/p/5452259.html ---------------------------------------------------------------------------------------------- 场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.D

一种解决h5页面背景音乐不能自动播放的方案

场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.DOMContentLoaded事件 微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady&

解决h5页面背景音乐不能自动播放的方案

场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.DOMContentLoaded事件 微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady&

解决iOS下input和fixed 问题

在ios下如果页面底部有fixed 元素当有input输入框触发键盘时fixed会浮动在页面出现展示总是 解决方法有很多种,但是要根据实际需要更改 方法一.css解决(弊端:当有大面积input元素时会出现滑动不顺畅问题) //这里给内容区域设置 position:absolute,并且设置一个距离fixed的底部距离 .main{ position:absolute; bottom:rem-calc(80px); //fixed元素的高度 top:0; left:0; width:100%;

ios下app内嵌h5页面是video适配问题

ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视频显示不全(超出手机宽度),原始poster图片大小是750x420尝试诸多方法包括设置object-fit:fill;等,都无效,最后把封面图等比缩小为420x236完美解决: 总结: ios下的webview会将video的poster等比放大适应video:但不会等比缩小适应video: 原文

解决IOS下不支持fixed的问题

我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focus的时候让fixed块position变为relative,这是最简单的处理方法. 下面是我的小demo <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf

一行代码解决ios下局部滚动干涩问题

全局滚动: body自身的滚动就是全局滚动,在ios下这样的滚动很流畅. 局部滚动:body下的dom滚动就是局部滚动,在ios下这样的滚动感觉比较干涩. 解决方法: 在滚动的dom上加上以下代码: selector { -webkit-overflow-scrolling: touch; } 建议加在body上,这样子标签都会继承这条属性.

iOS背景音乐不自动播放

iOS 内置浏览器safari不允许自动播放音乐.我们需要通过WeixinJSBridgeReady()函数实现自动触发 document.addEventListener("WeixinJSBridgeReady", function () { $('audio').play(); }, false); 但是加了上面的代码后在平常开发中还是会偶发这个现象 解决办法:加载完后添加以下逻辑,重新播放一下 wx.ready(function () { $("audio"

h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题

项目中遇到了这个问题,说实话 iOS 端问题挺多的,原因找起来比较简单,就是吊起键盘的时候把window的高度挤小了,然后, 关掉键盘页面高度没恢复,安卓手机会自动恢复页面高度. 原因找到了就想解决办法,刚开始想的是 iOS 它不恢复那我也没办法,这属于 iOS 的bug啊或者微信的 bug 啊,但领导不这么想, 页面显示出问题了当然得解决,就在google里翻,也是找到解决方法了,如下链接 微信6.7.4 ios12软键盘顶起页面后隐藏不回弹解决方案 解决方法很简单,让window滚动下就可以