博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信浏览器播放音频的问题:preload属性
阅读量:6114 次
发布时间:2019-06-21

本文共 980 字,大约阅读时间需要 3 分钟。

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

转载于:https://www.cnblogs.com/xiaochongchong/p/10007517.html

你可能感兴趣的文章
centos 下安装g++
查看>>
嵌入式,代码调试----GDB扫盲
查看>>
类斐波那契数列的奇妙性质
查看>>
配置设置[Django]引入模版之后报错Requested setting TEMPLATE_DEBUG, but settings are not configured....
查看>>
下一步工作分配
查看>>
Response. AppendHeader使用大全及文件下载.net函数使用注意点(转载)
查看>>
Wait Functions
查看>>
代码描述10313 - Pay the Price
查看>>
jQuery最佳实践
查看>>
centos64i386下apache 403没有权限访问。
查看>>
vb sendmessage 详解1
查看>>
jquery用法大全
查看>>
Groonga 3.0.8 发布,全文搜索引擎
查看>>
PC-BSD 9.2 发布,基于 FreeBSD 9.2
查看>>
网卡驱动程序之框架(一)
查看>>
css斜线
查看>>
Windows phone 8 学习笔记(3) 通信
查看>>
重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush
查看>>
Revit API找到风管穿过的墙(当前文档和链接文档)
查看>>
Scroll Depth – 衡量页面滚动的 Google 分析插件
查看>>