解决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')跳转到/ ...
随机推荐
- c++ 逆序对
c++ 求逆序对 例如数组(3,1,4,5,2)的逆序对有(3,1)(3,2)(4,2)(5,2)共4个 逆序对就是左边的元素比右边的大,那么左边的元素和右边的元素就能产生逆序对 代码跟归并排序差不多 ...
- Flutter学习笔记（6）--Dart异常处理
如需转载,请注明出处:Flutter学习笔记(6)--Dart异常处理 异常是表示发生了意外的错误,如果没有捕获异常,引发异常的隔离程序将被挂起,并且程序将被终止: Dart代码可以抛出并捕获异常,但 ...
- Java编程思想：擦除的补偿（数组泛型处，我有很多细节没有研究）
import sun.net.www.content.text.Generic; import java.lang.reflect.Array; import java.util.ArrayList; ...
- backbone之路由锚点的替换
1.需求 由于项目一开始做的时候不甚完善,所有的网页没有路由功能,导致一些搜索结果在页面跳转之后,没有被记录下来,在页面跳转之后回退,得到的是页面最原始的结果,没有指定的搜索条件.最近项目的在完善这些 ...
- [AOP拦截 ]SpringBoot+Quartz Aop拦截Job类中的方法
最近在工作使用boot+quartz整合,开发定时调度平台,遇到需要对Quartz的Job进行异常后将异常记录到日志表的操作,第一反应就想到了使用Spring的AOP,利用AfterThrowin ...
- C#8.0 新增功能
连载目录 [已更新最新开发文章,点击查看详细] C#8.0提供了许多增强功能 01 Readonly 成员 可将 readonly 修饰符应用于结构的任何成员. 它指示该成员不会修改状态. 这比 ...
- 校园表白墙、微信表白墙、校园墙 微信小程序 JAVA 开发记录与分享
目录 最新版表白墙博客地址 1.微信小程序前台展示 2.功能介绍 3.后台管理 4.后端语言采用 JAVA 开发 5.体验此微信小程序 扫描下方二维码 6.如何联系我或需要源码进行联系 最新版表白墙博 ...
- Linux更换默认Security源
很多时候 修改了软件源,但是发现更新还是很慢,查看一下,如下图,有一个security ,显然主源还是在ubuntu,ubuntu本身在国外,所以很慢,因此考虑替换为国内镜像. 图1 1.备份数据源列 ...
- java多线程核心api以及相关概念(一)
这篇博客总结了对线程核心api以及相关概念的学习,黑体字可以理解为重点,其他的都是我对它的理解 个人认为这些是学习java多线程的基础,不理解熟悉这些,后面的也不可能学好滴 目录 1.什么是线程以及优 ...
- Python实现淘宝秒杀聚划算自动提醒源码
快来加入群[python爬虫交流群](群号570070796),发现精彩内容. 本实例能够监控聚划算的抢购按钮,在聚划算整点聚的时间到达时发出提醒(音频文件自己定义位置)并自动弹开页面(URL自己定义 ...