微信瀏覽器播放音頻的問題：preload屬性

測試工具：ios微信。

h5的Audio對象有個很重要的屬性：preload;preload 屬性規定是否在頁面加載後載入音頻。有4個值：
auto - 當頁面加載後載入整個音頻
meta - 當頁面加載後只載入元數據
none - 當頁面加載後不載入音頻
空字符串 - 等效於auto屬性

對於Audio對象，若是不須要展現播放界面，咱們徹底能夠在js裏構造這個對象：

var audio = new Audio;
audio.preload = 'none';//設置none屬性
//當點擊第一個div元素是播放音頻
document.getElementsByTagName('div'）[0].addEventListener('click', function () {
	audio.play()
},false)

　　

若是是考慮到初次加載頁面顯示快慢的問題，咱們徹底能夠將preload設置爲'none',這樣就不會在頁面首次加載的時候下載音頻資源。
以上作法在safari（手機瀏覽器）和chrome（電腦瀏覽器）裏，沒有任何問題，打開chrome的network,發現頁面初始化確實不會加載音頻，只有當點擊的時候，調用auido的play()方法時，纔會下載音頻。可是，事情並無那麼順利，咱們在ios的微信裏，發現根本不播放音頻。解決辦法：
1.不設置preload值或者設置preload爲auto，微信瀏覽器均可以播放，可是頁面音頻比較多，第一次都會加載，網頁速度慢。
2.在設置audio.preload = 'none'，不提早加載的狀況下：用微信內置的方法：

if(typeof WeixinJSBridge === 'object'){
	 WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
        audio.play();
     });
}else{
	audio.play()
}

　

注意，網上有不少資料說要用：document.addEventListener("WeixinJSBridgeReady"）。我測試的都不會觸發這個事件！！！