微信浏览器播放音频的问题: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")。我测试的都不会触发这个事件!!!

posted @ 2018-11-23 14:42  小虫1  阅读(3955)  评论(0编辑  收藏  举报