微信和iOS 不能自动播放怎么办?

fiurt

最近这段时间都在基于微信平台开发,不得不说踩了不少坑.这篇文章就重点来说说微信与 HTML5 中的 元素令人头痛的问题.

一般来说我们要利用 实现音频自动播放只需要在 标签上加上 autoplay 属性.实现简单的 音频自动播放,代码如下:

    
    
    
    
    



    

        
        
播放/暫停
    
    
    

• 在 PC 端的 Chrome 浏览器,Edge 浏览器上访问,能够自动播放音频.
• 在 Android 手机上使用微信和 Android 自带浏览器访问,能够自动播放音频.
• 在 iPhone iOS10 系统 手机上使用微信和 Safari 浏览器访问,无法自动播放音频.

看来在 标签加上 autoplay 属性并不能兼容所有浏览器.那我们再使用 js 代码调用 元素提供的 play() 方法试试,修改一下上面的代码:

    
    
    
    
    



    

        
        
播放/暫停
    
    
    

情况和刚才一样,这一招也行不通.

为什么在 iPhone 上就无法自动播放音频?这是因为 iOS Safari 不允许自动播放 audio，只能通过用户交互触发.这大概是苹果公司出于用户体验而做的限制.但是为什么别人的 iPhone 使用微信打开一个 H5 却能自动播放音频?

这就需要说到一个被腾讯和谐掉的接口 WeixinJSBridge,这里就不讲为什么 WeixinJSBridge 接口会被和谐掉,反正都被和谐掉了,以后也不建议在项目中使用.但是腾讯又没把 WeixinJSBridge 这个 API 所有功能都和谐掉，相反，有好几个功能还是相当有用的，可以正常使用.有兴趣的可以看看<<微信JSAPI>>.接下来我们就需要用到尚未被腾讯和谐掉的 WeixinJSBridge 接口来实现在 iPhone 手机微信端 自动播放.

在微信内置浏览器中有一个内置的 JS 对象,这个内置的 JS 对象就是 WeixinJSBridge. WeixinJSBridge 并不是 WebView 一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件 "WeixinJSBridgeReady"。因此，在调用 WeixinJSBridge 相关 api 时，需要做好 WeixinJSBridge 存在与否的判断.修改一下上面的代码:

    
    
    
    
    



    

        
        
播放/暫停
    
    
    

• 在 PC 端的 Chrome 浏览器,Edge 浏览器上访问,能够自动播放音频.
• 在 Android 手机上使用微信和 Android 自带浏览器访问,能够自动播放音频.
• 在 iPhone iOS10 系统 手机上使用微信访问,能够自动播放音频.Safari 浏览器访问,依然无法自动播放音频.

上面已经说过了这是因为 iOS Safari 不允许自动播放 audio，只能通过用户交互触发.而 Safari 浏览器可没有内置 WeixinJSBridge 接口,所以一般的做法是监听 touchstart 事件进而调用 元素提供的 play() 方法播放音频.当然这是一个没有办法的办法.修改一下上面的代码:

    
    
    
    
    



    

        
        
播放/暫停
    
    
    

这样我们就能"兼容"所有浏览器了!
如果你想获得这段音频的长度（以秒计）,还可以监听浏览器能够开始播放这段音频时，发生的 canplay 事件来获取 元素的 duration 属性. duration 属性返回当前音频的长度，以秒计.如果未设置音频,则返回 NaN.修改一下上面的代码:

    
    
    
    
    



    

        
        
播放/暫停
    
    
    

更多有关 的信息可以参考 HTML 5 视频/音频参考手册,希望能够帮助到大家!