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")。我测试的都不会触发这个事件!!!