在 iOS Safari 中假裝自動播放 HTML5 audio(音樂) 的正確方式
阿新 • • 發佈：2019-01-31
文章來源：http://www.douban.com/note/527250492/
由於 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 一下
具體的實現方式請猛擊線上demo, 或者掃描下面的二維碼, 完整的程式碼請檢視