190°

解决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>

 

 


< 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 >

本文转载自博客园,原文链接:https://www.cnblogs.com/imMeya/p/11351839.html

全部评论: 0

    我有话说: