解决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')跳转到/ ...
随机推荐
- happy and angry day！ 2019-07-05
2019-07-05 01:59:51 现在我是挺开心的哈! 直面困难!迎难而上!毫无畏惧! 现在我的结果,少不了大家给我的支持与鼓励! 鸣谢 章香涛老师---------在各个方面鼓舞了我,激发了我 ...
- Spring的Ioc模拟实现
关于IOC:我们讲个故事吧! 有一个厨师,他在做一道菜的时候需要某种调味料(bean),可是他正好没有那瓶调味料(bean),这个时候他就必须去制作一瓶调味料(bean)出来.(这就像我们平时需要 ...
- Bzoj 3165 [Heoi2013]Segment题解
3165: [Heoi2013]Segment Time Limit: 40 Sec Memory Limit: 256 MBSubmit: 668 Solved: 276[Submit][Sta ...
- android_sdcard读写(三)
这次来个稍微复杂点的. package cn.com.sxp;import android.app.Activity;import android.app.ProgressDialog;import ...
- Java编程思想：擦除的神秘之处
import java.lang.reflect.Array; import java.util.ArrayList; import java.util.List; public class Test ...
- 数组指针&&指针数组
数组指针: 定义 int (*p)[n]; 占用内存中一个指针的存储空间 ()优先级高,首先说明p是一个指针,指向一个int型的一维数组,故名数组(的)指针.指向的一维数组的长度是n,也可以 ...
- elasticsearch5.4集群超时
四个节点,有两个是新增加的节点,两个老节点间组成集群没有问题,新增加了两个节点,无论是四个组成集群 # --------------------------------- Discovery ---- ...
- 吐槽下Excel的十大不规范使用问题
Excel是个老少咸宜的软件工具,这是不争的事实,无论哪个级别的用户,都能在乐在其中.但问题是太多的人群因为不懂得正确的使用姿势,硬生生地把Excel玩得让人啼笑皆非,同样留给接手者一个难堪无比的烂摊 ...
- C#7.1 新增功能
连载目录 [已更新最新开发文章,点击查看详细] C# 7.1 是 C# 语言的第一个点版本(更新版本). 它标志着该语言发布节奏的加速. 理想情况下,可以在每个新功能准备就绪时更快推出新功能. ...
- [leetcode] 559. Maximum Depth of N-ary Tree (easy)
原题链接 思路: 简单bfs class Solution { public: int maxDepth(Node *root) { int depth = 0; if (root == NULL) ...