我们知道,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. Linux内核笔记——内存管理之块内存分配

    内核版本:linux-2.6.11 伙伴系统 伙伴系统是linux用于满足对不同大小块物理内存分配和释放请求的解决方案. 内存管理区 linux将物理内存分成三个内存管理区,分别为ZONE_DMA Z ...

  2. Ant:build.xml 结构

     Ant build.xml 结构 project target task data property datatype v\:* {behavior:url(#default#VML);} o\:* ...

  3. JDK BIO编程

    网络编程的基本模型是Client/Server模型,也就是两个进程之间进行相互通信,其中服务端提供位置信息(绑定的IP地址和监听端口),客户端通过连接操作向服务端监听的地址发起连接请求,通过三次握手建 ...

  4. android user版本默认开启调试模式

    由于项目需要,需要发布版本默认开启调试模式,修改方式如下: 1.开启开发者模式 context.getSharedPreferences(DevelopmentSettings.PREF_FILE,C ...

  5. Top 10 questions about Java Collections--reference

    reference from:http://www.programcreek.com/2013/09/top-10-questions-for-java-collections/ The follow ...

  6. 建房子之前先挖地基 - Java BlockingQueue理解

    最近一直在看<Think In Java>里关于并发部分的章节,读到第二十一章有一个有趣的比喻:必须先挖房子的地基,但是接下来可以并行的铺设钢结构和构建水泥部件,而这两项任务必须在混凝土浇 ...

  7. eclipse,android Localization (Internationalization) 安卓本地化(国际化)

    1.创建新的资源文件,名字保持一致.提示"已存在",继续. 2.使用“语言”作为识别器,然后选择相应的语言代码.Tips:其他的适配,如国家.屏幕大小等,也是通过这里的识别器实现适 ...

  8. NYOJ 925 国王的烦恼

    从最后一天开始往前加边. 同一天的边同时加到图上,加完之后检查集合数量是否和没加之前有变化. 有变化的话,答案就+1. #include<cstdio> #include <iost ...

  9. EF6的多线程与分库架构设计实现

    1.项目背景 这里简单介绍一下项目需求背景,之前公司的项目基于EF++Repository+UnitOfWork的框架设计的,其中涉及到的技术有RabbitMq消息队列,Autofac依赖注入等常用的 ...

  10. 《Android进阶》Sqlite的使用

    之前认为Sqlite只能一次性创建多个表,其实不是 关键是对Sqlite的操作需要一些技巧: package com.example.mydemo; import android.content.Co ...