解决iphone下无法自动播放音乐问题

由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio，下面两种方法均可实现自动播放，但多少都有些不完美，根据场景自己选择。

方法一：

如果是微信内置浏览器下访问，可借助微信的js接口方法，iOS和Android都适用。完美实现

废话不多说，代码如下：

  
自动播放背景音乐：微信客户端访问，适用IOS和Android（直接用Safari访问可能无效）
    

方法二：（转）

来源：https://www.douban.com/note/527250492/

ake auto play html audio in iOS Safari the right way

由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio.

这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.
但 iOS 9 出现后, 发现这个方案"失效"了.

没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件.

对于能够自动播放时事件的顺序如下
loadstart -> loadedmetadata -> loadeddata -> canplay -> play -> playing

对于不能自动播放时触发的事件因系统版本不同而不同
* iPhone5 iOS 7.0.6 loadstart
* iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay

最终发现相比原来的 hack 方案, 对于 iOS 9 还需要额外的 load 一下, 否则直接 play 不能让 audio 开始播放.
    audioEl.load(); // iOS 9
    audioEl.play(); // iOS 7/8 仅需要 play 一下

    
    
    


    
在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式
    
核心原理: 通过一个用户交互事件来主动 play 一下 audio