解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放

imMeya

我们知道，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; */
z-index: 1;
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";
var s = document.getElementsByTagName("script")[0];
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', {
resistanceRatio : 0,
pagination: {
el: '.swiper-pagination',
},
on: {
slideChange: function() {
// alert('改变了');
if (this.activeIndex == 0) {
document.getElementById("video").style.display="block"
} else {
video.pause();
document.getElementById("video").style.display="none"
}
}
}
});
 
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
xhr.open('post', 'http://query.h7go.com/index.php/wx?url='+location.href.split('#')[0] );
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send();
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
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>

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode