在iOS微信瀏覽器中自動播放HTML5 audio(音樂)的2種正確方式
阿新 • • 發佈：2019-01-29
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Auto play html audio in iOS WeChat InAppBrowser the right way</title> </head> <body> <h1>在 iOS 微信瀏覽器中自動播放 HTML5 audio(音樂) 的正確方式</h1> <p>核心原理: 在微信的JS-API 中 play 一下 audio 即可達到自動播放的目的(應該是微信自己做了處理)</p> <br> <br> <br> <audio id="bgmusic" src="http://oj1hxt5z0.bkt.clouddn.com/123.mp3" autoplay preload loop controls></audio> <!-- 當使用方法1時必須載入 JS-SDK 的 JS 檔案, 方法2不需要載入這個 JS --> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> // 方法1: 現在微信官方已經推出了微信JS-SDK, 最好還是不要使用"野生"方式, 因為不知道什麼時候就可以不能用了! // http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html// 通過config介面注入許可權驗證配置後, 在 ready 中 play 一下 audio function autoPlayAudio1() { wx.config({ // 配置資訊, 即使不正確也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(function() { document.getElementById('bgmusic').play(); }); } // 方法2: "野生"方法, 借用原來老的 WeixinJSBridge function autoPlayAudio2() { window.onload = function() { // alert(typeof WeixinJSBridge); WeixinJSBridge.invoke('getNetworkType', {}, function(e) { // 在這裡拿到 e.err_msg, 這裡面就包含了所有的網路型別 // alert(e.err_msg); document.getElementById('bgmusic').play(); }); }; } // 大家或多或少都知道 iOS Safari 不允許自動播放 audio, 可能已經被坑過了, // 但微信內嵌的瀏覽器應該是做了一些定製化, 允許自動播放 audio. // 測試了以下機型在微信內嵌瀏覽器中僅需設定 audio autoplay 即可自動播放(audio)音樂, 無需特殊處理. // * iPhone5 iOS 7.0.6 WeChat 6.2 // * iPhone5s iOS 8.1.2 WeChat 6.3.7 // * iPhone6Plus iOS 8.1.3 WeChat 6.3.7 // * MI1S Android 4.1.2 WeChat 6.3.7 // // 但是當手機是 iPhone6s iOS 9.1 WeChat 6.3.7 時, 必須做如下特殊處理才能在微信中自動播放(audio)音樂, // 我可以推測是 iOS 9 的相容性問題麼? // autoPlayAudio1(); // 推薦使用方法1 // autoPlayAudio2(); // 也可以試一試方法2 </script> </body> </html>