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

微信浏览器播放音频的问题:preload属性的更多相关文章

  1. egret 篇——关于ios环境下微信浏览器的音频自动播放问题

    前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...

  2. firefox浏览器播放音频

    之前做的系统,在firefox浏览器下有更好的使用体验.因此要求客户统一使用firefox浏览器,前段时间客户要求在系统中加入音频效果. 在网上查了下,主要用到的标签有<bgsound>, ...

  3. video 标签在微信浏览器的问题解决方法

    最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题: 在微信浏览器内播放时,视频会自动全屏 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设 ...

  4. 解决移动端浏览器 HTML 音频不能自动播放的三种方法

    https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...

  5. iphone在微信中audio 音频无法自动播放

    问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...

  6. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  7. 【bug解决】ios微信浏览器中背景音乐无法播放

    我记得之前在一次项目中,出现过浏览报错: 当时的文档链接如右:[解决]HTML5新标签audio的autoplay自动播放属性失效的解决方案 所以在这次H5的制作中,我使用了iframe来加载音频文件 ...

  8. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放

    我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...

随机推荐

  1. android 特殊符号开头的联系人归并至“#”下

    在PeopleActivity界面.联系人的显示位置是由其display name的第一个字符决定的. 数字开头的联系人会显示在"#"这个header下. 中英文联系人会显示在&q ...

  2. tomcat的HTTPS

    完美配置Tomcat的HTTPS 博客分类: Tomcat HTTPS   Tomcat配置HTTPS的文章到处都有,过程也比较简单,随后文中会转一段过来. 但对于启用APR情况下报异常“java.l ...

  3. Spring和SpringMVC的关系

    1.Spring和SpringMVC是父子容器关系. 2.Spring整体框架的核心思想是容器,用来管理bean的生命周期,而一个项目中会包含很多容器,并且它们分上下层关系,目前最常用的一个场景是在一 ...

  4. Android Jni层 创建 linux socket 出错问题解决

    问题: 想在Jni层创建 udp socket 与服务端通信,可是没有成功.最后发现居然是创建socket失败(代码例如以下) // create socket g_sd = socket(AF_IN ...

  5. ibatis 取消查询动态列的缓存

    ibatis在查询结果列不确定(或是动态变化)的情况下,会因为列缓存的原因导致变化后的列数据查不出来 解决方法是: select标签有个属性remapResults,该属性默认值为false,设置成r ...

  6. 【Android】Android输入子系统【转】

    本文转载自:https://www.cnblogs.com/lcw/p/3506110.html Linux输入子系统回顾 1:为什么要回顾linux输入子系统?这个问题后面自然就知道了 1.linu ...

  7. Email-ext plugin

    https://wiki.jenkins.io/display/JENKINS/Email-ext+plugin General This plugin extends Jenkins built i ...

  8. 多台Mac电脑使用同一个apple开发者账号测试

    因为公司有苹果一体机,家里有macbook和黑苹果台式机,多台电脑用同一个开发者账号,每次真机调试时都是选择直接reset,回到另外一台电脑,又要重新设置,太麻烦了.直到最近才设置三台电脑都可以,分享 ...

  9. POJ1584 A Round Peg in a Ground Hole 凸包判断 圆和凸包的关系

    POJ1584 题意:给定n条边首尾相连对应的n个点 判断构成的图形是不是凸多边形 然后给一个圆 判断圆是否完全在凸包内(相切也算) 思路:首先运用叉积判断凸多边形 相邻三条边叉积符号相异则必有凹陷 ...

  10. TI BLE: Advertisement

    #define GAPROLE_ADVERT_ENABLED 0x305 //!< Enable/Disable Advertising. Read/Write. Size is uint8. ...