解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放
我们知道，ios 在safari浏览器中，audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放，这是系统限制的一些原因。
但是背景音乐在微信浏览器可以设置自动播放，config配置一下就ok！
1.引入Js文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
2.通过config接口注入权限验证配置
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false
, appId: ''
, timestamp: 1
, nonceStr: ''
, signature: ''
, jsApiList: []
});
3.通过ready接口用js处理播放
wx.ready(function () {
document.getElementById("bgmusic").play();
});
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>解决背景音乐无法播放问题</title>
</head>
<body>
<audio id="bgmusic" src="http://www.w3school.com.cn/i/song.mp3" autoplay preload loop></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
<script>
window.onload = function(){
function autoPlayAudio() {
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false
, appId: ''
, timestamp: 1
, nonceStr: ''
, signature: ''
, jsApiList: []
});
wx.ready(function () {
document.getElementById("bgmusic").play();
});
}
autoPlayAudio();
}
</script>
</body>
</html>
附加背景音乐和视频禁止同时播放
function controlMusic() {
video.addEventListener("play", function() {
audio.pause(); //暂停
on.style.display = "none";
off.style.display = "block";
});
video.addEventListener("pause", function() {
audio.play();
off.style.display = "none";
on.style.display = "block";
});
}
controlMusic();
解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放的更多相关文章
- 解决安卓微信浏览器中location.reload 或者 location.href失效的问题
在移动wap中,经常会使用window.location.href去跳转页面,这个方法在绝大多数浏览器中都不会 存在问题,但早上测试的同学会提出了一个bug:在安卓手机的微信自带浏览器中,这个是失效的 ...
- 【bug解决】ios微信浏览器中背景音乐无法播放
我记得之前在一次项目中,出现过浏览报错: 当时的文档链接如右:[解决]HTML5新标签audio的autoplay自动播放属性失效的解决方案 所以在这次H5的制作中,我使用了iframe来加载音频文件 ...
- 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决微信浏览器中无法一键拨号问题tel
公众号中需要在某些页面显示手机号码,并且需要点击后拨号. 原以为 <a href="tel:10086">10086</a> 可以解决了, 没想到在微信浏览 ...
- H5中背景音乐无法自动播放问题
苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载 ...
- 关于h5中背景音乐的自动播放
音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"> <sou ...
- 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)
1.问题 在微信浏览器中,需要时刷新当前页面. 正常情况下我们直接使用 location.reload 方法来刷新. 2.解决方法 function realod(){ var {search,hre ...
- vue-router 在微信浏览器中操作history URl未改变的解决方案
在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...
随机推荐
- 干货分享：ASP.NET CORE（C#）与Spring Boot MVC(JAVA)异曲同工的编程方式总结
目录 C# VS JAVA 基础语法类比篇: 一.匿名类 二.类型初始化 三.委托(方法引用) 四.Lambda表达式 五.泛型 六.自动释放 七.重写(override) ASP.NET CORE ...
- Salesforce Admin篇(二) Report
针对salesforce系统也好,针对其他的平台系统也好,对于business user的需求以及疑问,数据往往决定了答案.业务人员提出了某些疑问,管理员需要根据需求的分析转换成数据的分析及过滤从而反 ...
- 雅阁微信群、雅阁车友群、十代雅阁交流微信QQ群
最近一直在关注第十代雅阁,不论是普通汽油版本还是油电混动版本都很不错,在网上看到很多评测文章和视频 后续都会整理发布到微信群中. 由于论坛发帖,博客发文都不是很方便,为了及时沟通,先创建了微信群,方便 ...
- 聊聊Java String.intern 背后你不知道的知识
Java的 String类有个有意思的public方法: public String intern() 返回标准表示的字符串对象.String类维护私有字符串池. 调用此方法时,如果字符串池已经包含等 ...
- Perm排列计数（新博客试水，写的不好，各路大神见谅）
B. Perm 排列计数 内存限制:512 MiB 时间限制:1000 ms 标准输入输出 题目描述 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i&l ...
- py+selenium+IE 批量执行脚本10几分钟，IE会卡住【无解，提供绕过方法】
问题:py+selenium+IE 批量执行单个脚本10几分钟,IE会卡住 一个脚本文件里有20几个用例,跑起来10多分钟,每次跑10分钟后(即第22条用例左右时)IE就会卡住,程序就会在那傻等,最后 ...
- exgcd、二元一次不定方程学习笔记
(不会LATEX,只好用Word) ( QwQ数论好难) 再补充一点,单次询问a,b求逆元的题可以直接化简然后套用exgcd求解. 例题:https://www.luogu.org/problemne ...
- [小米OJ] 6. 交叉队列
思路: 大概思想如下: 1. 动态规划求解,构造dp[][] 二维数组: 2. 设dp[i][j], i 为 第一个字符串的第i个字母:j 为 第二个字符串的第j个字母 3. dp[i][j] 如果 ...
- css 图片裁剪显示
用object-fit:cover object-fit属性详解 object-fit:CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框. object-fit:fill 被替换 ...
- python小技巧 将二元列表转为一元列表
list=[num for row in nums for num in row]