我们知道,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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta
name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<title>天猫新品首发</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper-4.2.2.min.css">
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/text.css">
<style>
.video-wrap{
width: 80%;
height: auto;
margin-top: 15%;
border-top: 20px solid #fff;
/* background: #000; */
;
border-bottom: 20px solid #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.video-wrap .swiper-slide{
height: auto !important;
}
</style>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f51378b90ca0f36cdc0e514eb96d752b";
];
s.parentNode.insertBefore(hm, s);
})();
</script>
 
</head>
<body>
<!-- Swiper -->
<div id="loading" class="loading">
<img class="loaing-img" src="http://cdn.h7go.com/proto/projectRock/wx/images/loading1_02.png" alt="">
<div class="progress">
<div class="progress-bar">
<div class="progress-value"></div>
</div>
</div>
</div>
</div>
<div class="slider-btn">
<img id="lastSlider" src="http://cdn.h7go.com/proto/projectRock/wx/images/slide.png" alt="">
</div>
<audio id="bgmusic" src="http://cdn.h7go.com/proto/projectRock/0000.mp3" autoplay preload loop></audio>
<span id="control">
<img id="on" class="icon-btn" src="http://cdn.h7go.com/proto/projectRock/wx/images/music.png" alt="">
<img id="off" class="icon-btn" src="http://cdn.h7go.com/proto/projectRock/wx/images/music_pause.png" alt="" style="display:none">
</span>
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide first">
<img style="position:absolute;width:100%;height:100%;" src="http://cdn.h7go.com/proto/projectRock/wx/images/bg.gif" alt="">
<div class="bg">
<img src="http://cdn.h7go.com/proto/projectRock/wx/images/solgan.png" style="margin-top:100px" alt="">
<img src="http://cdn.h7go.com/proto/projectRock/wx/images/box.png" alt="">
<img style="width: 100px;position: absolute;bottom: 10%;" src="http://cdn.h7go.com/proto/projectRock/wx/images/tmsf.png" alt="">
</div>
</div>
 
<div class="swiper-slide second public-bg">
<img style="position:absolute;width:100%;" src="http://cdn.h7go.com/proto/projectRock/wx/images/page2_bg.jpg" alt="">
<img class="img1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page2_title.png" alt="">
<img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page2_signature.png" alt="">
</div>
<div class="swiper-slide page3 public-bg">
<img style="position:absolute;width:100%;display: flex;align-items: center;" src="http://cdn.h7go.com/proto/projectRock/wx/images/page3_bg.jpg" alt="">
<img class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page3_title.png" alt="">
<img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page3_buds.png" alt="">
</div>
<div class="swiper-slide page4">
<img style="position:absolute;width:100%;display: flex;align-items: center;" src="http://cdn.h7go.com/proto/projectRock/wx/images/page4_bg.jpg" alt="">
<div class="video-wrap">
<div class="swiper-container swiper-container2" style="height:auto">
<div class="swiper-wrapper" style="height:auto">
<div class="swiper-slide" style="height:auto">
<div>
<video id="video" src="http://cdn.h7go.com/media/video/0000.m4v"
controls=""
preload="auto"
poster="http://cdn.h7go.com/proto/projectRock/wx/images/video_cover.jpg"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay="allow"
x5-playsinline
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
x5-video-orientation="portraint"
style="object-fit:fill"></video>
</div>
 
</div>
<div class="swiper-slide">
<img src="http://cdn.h7go.com/proto/projectRock/wx/images/pic1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://cdn.h7go.com/proto/projectRock/wx/images/pic2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://cdn.h7go.com/proto/projectRock/wx/images/pic3.jpg" alt="">
</div>
 
</div>
 
 
</div>
 
</div>
<div class="swiper-pagination" style=" width: 100%;bottom: 13%;"></div>
</div>
<div class="swiper-slide public-bg page5">
<img style="position:absolute;width:100%;opacity: .6;" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_bg.jpg" alt="">
<div class="icon-wrap" style="position:relative">
<img class="img1" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_layer2.png" alt="" style="position:absolute;z-index:1;width:100%;">
 
<div style="width:100% ;z-index: 1">
<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_9_icons/p5icons_1.png" alt="">
<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_9_icons/p5icons_2.png" alt="">
<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_9_icons/p5icons_3.png" alt="">
<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_9_icons/p5icons_4.png" alt="">
<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_9_icons/p5icons_5.png" alt="">
<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.7s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_9_icons/p5icons_6.png" alt="">
<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_9_icons/p5icons_7.png" alt="">
<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_9_icons/p5icons_8.png" alt="">
<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" src="http://cdn.h7go.com/proto/projectRock/wx/images/page5_9_icons/p5icons_9.png" alt="">
</div>
 
</div>
</div>
<div class="swiper-slide page6">
<img style="position:absolute;width:100%;" src="http://cdn.h7go.com/proto/projectRock/wx/images/page6.jpg" alt="">
<!-- 目标元素 -->
<div id="foo">$shREY8mGRdW$</div>
<div class="copy-right"><img src="http://cdn.h7go.com/proto/projectRock/wx/images/copyright.png" alt=""></div>
<div class="mask" id="mask" style="display:none">
<img src="http://cdn.h7go.com/proto/projectRock/wx/images/mask.png" alt="">
 
</div>
<div class="close" id="close"></div>
<!-- 复制按钮 -->
<a class="copyBtn" href="javascript:" data-clipboard-action="copy" data-clipboard-target="#foo"></a>
</div>
</div>
<!-- Add Pagination -->
<!-- <div class="swiper-pagination"></div> -->
</div>
<!-- Swiper JS -->
<script src="js/swiper-4.2.2.min.js"></script>
<script src="js/swiper.animate1.0.3.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>
<script src="js/index.js"> </script>
 
 
<!-- Initialize Swiper -->
<script>
var swiper2 = new Swiper('.swiper-container2', {
,
pagination: {
el: '.swiper-pagination',
},
on: {
slideChange: function() {
// alert('改变了');
) {
document.getElementById("video").style.display="block"
} else {
video.pause();
document.getElementById("video").style.display="none"
}
}
}
});
 
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
] );
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send();
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
&& ) {
console.log(xhr.response);
console.log(JSON.parse(xhr.response).info.appId)
var data = JSON.parse(xhr.response).info;
console.log(data)
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp:data.timestamp , // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名
jsApiList: [ 'updateAppMessageShareData','updateTimelineShareData'] // 必填,需要使用的JS接口列表
});
wx.checkJsApi({
jsApiList: ['updateAppMessageShareData','updateTimelineShareData'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
console.log(res)
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
//分享
wx.ready(function(){
wx.updateAppMessageShareData({
title: "是什么让The Rock 如此强大?", // 分享标题
desc: "The Rock强森参与设计 JBL x UA安德玛联名 天猫新品首发中", // 分享描述
link: "http://promo.h7go.com/proto/projectRock/wx/index.html", // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: "http://cdn.h7go.com/media/images/H5/thumnail.jpg", // 分享图标
type: "", // 分享类型,music、video或link,不填默认为link
dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
success: function() {
 
}
});
wx.updateTimelineShareData({
title: 'The Rock强森参与设计 JBL x UA安德玛联名 天猫新品首发中', // 分享标题
link: 'http://promo.h7go.com/proto/projectRock/wx/index.html', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://cdn.h7go.com/media/images/H5/thumnail.jpg', // 分享图标
success: function () {
// 设置成功
}
})
})
}
};
 
</script>
</body>
</html>

解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放的更多相关文章

  1. 解决安卓微信浏览器中location.reload 或者 location.href失效的问题

    在移动wap中,经常会使用window.location.href去跳转页面,这个方法在绝大多数浏览器中都不会 存在问题,但早上测试的同学会提出了一个bug:在安卓手机的微信自带浏览器中,这个是失效的 ...

  2. 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...

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

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

  4. 解决微信浏览器中无法一键拨号问题tel

    公众号中需要在某些页面显示手机号码,并且需要点击后拨号. 原以为 <a href="tel:10086">10086</a> 可以解决了, 没想到在微信浏览 ...

  5. H5中背景音乐无法自动播放问题

    苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载 ...

  6. 关于h5中背景音乐的自动播放

    音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"> <sou ...

  7. 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)

    1.问题 在微信浏览器中,需要时刷新当前页面. 正常情况下我们直接使用 location.reload 方法来刷新. 2.解决方法 function realod(){ var {search,hre ...

  8. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  9. 【转】一种解决h5页面背景音乐不能自动播放的方案

    原文:http://www.cnblogs.com/wmhuang/p/5452259.html --------------------------------------------------- ...

  10. 解决ios下的微信打开的页面背景音乐无法自动播放

    后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...

随机推荐

  1. (七)Transformation和action详解-Java&amp;Python版Spark

    Transformation和action详解 视频教程: 1.优酷 2.YouTube 什么是算子 算子是RDD中定义的函数,可以对RDD中的数据进行转换和操作. 算子分类: 具体: 1.Value ...

  2. Could not synchronize database state with session

    今天做一个简单保存时,db2数据库报的错误,网上收集了下问题的解决办法~ 1.主键不是自动生成的,然后自己没手动设置. 2.插入的实体字段跟数据库的关键字冲突. 3.更新的时候,如果更新一个不存在的i ...

  3. asp.net如何确定是哪些控件验证失败

    Page.Validate("FeedBack"); if (!Page.IsValid) { foreach (IValidator validator in Validator ...

  4. Java ----------- 正则表达式(更新中。。。。。。)

    RegEx:Regular Expression. 元字符 描述 \ 将下一个字符标记符.或一个向后引用.或一个八进制转义符.例如,“\\n”匹配\n.“\n”匹配换行符.序列“\\”匹配“\”而“\ ...

  5. ibatis3.0调用Oracle的存储过程

    直接上源码 一,oracle储存过程. create or replace procedure proc_get_th(i_hth in varchar2,o_ret out sys_refcurso ...

  6. 成都大数据Hadoop与Spark技术培训班

    成都大数据Hadoop与Spark技术培训班   中国信息化培训中心特推出了大数据技术架构及应用实战课程培训班,通过专业的大数据Hadoop与Spark技术架构体系与业界真实案例来全面提升大数据工程师 ...

  7. 基于Nginx服务器和iOS9的HTTPS安全通信

    简介 在网络通信中,使用抓包软件可以对网络请求进行分析,并进行重放攻击,重放攻击的解决方案一般是使用一个变化的参数,例如RSA加密的时间戳,但考虑到网络传输时延,时间戳需要有一定的误差容限,这样仍然不 ...

  8. 猴子吃桃问题(Java递归实现)

    猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个,第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早上想再吃时,见只剩下 ...

  9. php 的Boolean类型

    1. bool值不用区分大小写 $flag = Ture; $flag = TRUE $flag = true; 2. 其他类型在运算中转换为bool值 var_dump((bool) '0'); / ...

  10. random os 序列化 模块模块 随机选择

    # 1 random 模块 随机选择# import random#随机取小数# ret = random.random() #空是0到1之间的小数字# print(ret)# # 0.0799728 ...