微信收藏无法下载的伴奏播放不了也下载不了

来源：蜘蛛抓取(WebSpider) 时间：2018-07-08 20:52 标签： 微信收藏无法下载
  • 场景：微信、浏览器、App
  • 普通解决方案：采用audio标签的autoplay属性
  1. 大部分IOS系统和少部分Android微信不支持自动播放

发现部分机型监听DOMContentLoaded和load事件，在回调中也可以播放音乐；

所以为了保险起见，可以同时监听两个事件以增强其适用性。

  1. 部分Android浏览器和所有IOS下Safari浏览器不支持自动播放

　　解决方案：通过手势事件播放音乐

　　缺点：部分元素的touch事件可能会阻止冒泡需要在对应的地方调起播放音乐函数

　　(2) 可以增加透明层，点击到透明层播放音乐，关闭透明層；

　　缺点：第一次点击按钮元素可能不响应造成用户体验上的伤害。

  1. 部分App不支持webview音乐自动播放

　　解决方案：1.壳浏览器支持；2.通过掱势事件播放音乐




  • 场景：微信、浏览器、App
  • 普通解决方案：采用audio标签的autoplay属性

API建立在微信壳浏览器的内置JS对象WeixinJSBridge上WeixinJSBridge并不是WebView一打开就有了，客户端需要初始化这个对象当这个对象准备好的时候，客户端会抛出事件”WeixinJSBridgeReady”发现部分机型，监听DOMContentLoaded和load事件在回调中也可以播放音乐；所以，为了保险起见可以同时监听两个事件，以增強其适用性 

 

 2、部分Android浏览器和所有IOS下Safari浏览器不支持自动播放
　解决方案：通过手势事件播放音乐
　　(1) 监听body的touchstart事件，回调中播放音乐；
　　缺点：部分元素的touch事件可能会阻止冒泡需要在对应的地方调起播放音乐函数
　　(2) 可以增加透明层，点击到透明层播放音乐，关闭透明層；
　　缺点：第一次点击按钮元素可能不响应造成用户体验上的伤害。
部分App不支持webview音乐自动播放
　　解决方案：1.壳浏览器支持；2.通过掱势事件播放音乐
 
 

 
 
 
 

 解决问题时五一搜到的记录下来帮助理解解决问题。
原网址 
另：亲测有效

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

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

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

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

我要回帖

更多关于 微信收藏无法下载 的文章

 

随机推荐