我们知道，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兼容-- 背景音乐无法自动播放的更多相关文章

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

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

  2. 【bug解决】ios微信浏览器中背景音乐无法播放

    我记得之前在一次项目中,出现过浏览报错: 当时的文档链接如右:[解决]HTML5新标签audio的autoplay自动播放属性失效的解决方案 所以在这次H5的制作中,我使用了iframe来加载音频文件 ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. vue-router 在微信浏览器中操作history URl未改变的解决方案

    在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...

随机推荐

  1. 28nm工艺下，自动生成管脚排列文件，给设计加PAD，并在PAD上面打Label的流程（含Tcl脚本）

    本文转自:自己的微信公众号<数字集成电路设计及EDA教程> 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具的教程. 考虑到微信公众 ...

  2. QUIC

    QUIC(Quick UDP Internet Connection)是谷歌制定的一种基于UDP的低时延的互联网传输层协议.在2016年11月国际互联网工程任务组(IETF)召开了第一次QUIC工作组 ...

  3. 剑指offer第二版-4.二维数组中的查找

    面试题4:二维数组中的查找 题目要求: 一个二维数组中,每一行从左到右递增,每一列从上到下递增.输入一个整数,判断数组中是否含有该整数 /** * @since 2019年2月13日 下午5:08:5 ...

  4. Promise原理探究及实现

    前言 作为ES6处理异步操作的新规范,Promise一经出现就广受欢迎.面试中也是如此,当然此时对前端的要求就不仅仅局限会用这个阶段了.下面就一起看下Promise相关的内容. Promise用法及实 ...

  5. MyBatis从入门到精通：select用法进一步讲解

    selectAll:笔记 /* 定义接口方法的返回值的时候,必须注意查询SQL可能返回的结果数量.当 返回值最多只有一个结果的时候,可以将结果返回值定义为SysUser,此时 返回值类型为List&l ...

  6. 踩坑 Spring Cloud Hystrix 线程池队列配置

    背景: 有一次在生产环境,突然出现了很多笔还款单被挂起,后来排查原因,发现是内部系统调用时出现了Hystrix调用异常.在开发过程中,因为核心线程数设置的比较大,没有出现这种异常.放到了测试环境,偶尔 ...

  7. Hive调优策略

    Hive调优策略 Fetch抓取 Fetch抓取是指,Hive中对某些情况的查询可以不必使用MapReduce计算. 例如:select * from employee:在这种情况下,Hive可以简单 ...

  8. [剑指offer] 10. 旋转数组的最小数字

    题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 思路: 利用dp[i]保存盖2*i的矩形有多少种办法. 通过 ...

  9. springboot-权限控制shiro(一)

    1. 场景描述 (1)权限控制是IT项目特别是企业项目,绕不开的重要模块,接下来结合springboot介绍下权限控制框架shiro. (2)springboot集成shiro的东西有点多,一篇博客完 ...

  10. Gordon家族（一）

    引子 Go语言的吉祥物是一只囊地鼠(gopher),由插画师Renee French设计,名叫Gordon,长得这个样子: 在Go官网上(https://golang.google.cn/)的Gord ...