解决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')跳转到/ ...
随机推荐
- JSON.stringify() 的深入理解
目录 序言 语法 深入理解 序言 最近在看<你所不知道的javascript>[中卷]一书,第一部分是类型和语法.本文是基于这部分的产物.在强制类型转换->抽象值操作-> to ...
- k8s学习 - 概念 - master/node
k8s学习 - 概念 - master/node 在k8s中,有各种各样的概念和术语.这些概念是必须要学习和掌握的.我们先罗列下所有概念,然后再一个个看具体实例. 大概说一下这些概念: Master: ...
- python接口自动化（三十二）--Python发送邮件（常见四种邮件内容）番外篇——上（详解）
简介 本篇文章与前边没有多大关联,就是对前边有关发邮件的总结和梳理.在写脚本时,放到后台运行,想知道执行情况,会通过邮件.SMS(短信).飞信.微信等方式通知管理员,用的最多的是邮件.在linux下, ...
- Excel中vlookup函数使用
https://baijiahao.baidu.com/s?id=1594684818733205984&wfr=spider&for=pc
- cve-2018-14515复现
一.环境 Windows NT WIN-RRI9T9SN85D 6.1 build 7600 (Windows 7 Business Edition) i586 Apache/2.4.23 (Win3 ...
- HttpServlet cannot be resolved to a type 解决办法
刚开始学习Servlet,在Eclipse中新建了一个Servlet,不过页面上报错: Httpservlet cannot be resolved to a type,显然是Eclipse找不到相应 ...
- linux初学者-文件权限
linux初学者-文件权限 lunix系统都是以文件的形式存在,自然而然的就会要求不同的用户拥有不同的权限,这也是系统能够运行的根本保证,下文将对文件的权限管理进行简要的介绍. 1.文件属性的查看 - ...
- linux初学者-用户管理篇
linux的用户管理是非常以后工作中重要的一部分,也是linux系统安全的防线. 1.用户理解 那么到底什么是用户呢?用户就是系统使用者的身份. 用户是以怎样的方式储存在计算机中的呢?在系统中用户存储 ...
- Java_异常介绍
今日内容介绍: 掌握异常概述 理解异常的基础操作以及最简单的捕获处理 理解多异常捕获处理 理解声明抛出异常 掌握自定义异常 掌握异常处理注意事项 异常 什么是异常?Java代码在运行时期发生的问题就是 ...
- Spring 整合 ibatis
是的,真的是那个不好用的ibatis,不是好用的mybatis. 由于工作需要用到ibatis需要自己搭建环境,遇到了不少的坑,做一下记录. 一.环境配置 Maven JDK1.6 (非常重要,使用S ...