我们知道，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. Windows下必备的开发神器之Cmder使用说明

    诚言,对于开发码字者,Mac和Linux果断要比Windows更贴心;但只要折腾下,Windows下也是有不少利器的.之前就有在Windows下效率必备软件一文中对此做了下记载:其虽没oh-my-zs ...

  2. 在CentOS6.5部署Redis为开机自启

    2 - redis的生产启动方案 要把redis作为一个系统的daemon进程 去运行的,每次系统启动,redis进程一起启动,配置方案如下: 1. 在redis utils 目录下,有个redis_ ...

  3. restapi（1）- 文件上传下载服务

    上次对restapi开了个头,设计了一个包括了身份验证和使用权限的restful服务开发框架.这是一个通用框架,开发人员只要直接往里面加新功能就行了.虽然这次的restapi是围绕着数据库表的CRUD ...

  4. 【bfs基础】①

    bfs,即广度优先搜索,主要通过队列(queue)进行操作. 稍微解释一下,队列是一种基础数据结构,其形态类似于一支长长的队伍,大概如下: 在C++中,队列的头文件定义为:#include<qu ...

  5. 《ElasticSearch6.x实战教程》之简单搜索、Java客户端（上）

    第五章-简单搜索 众里寻他千百度 搜索是ES的核心,本节讲解一些基本的简单的搜索. 掌握ES搜索查询的RESTful的API犹如掌握关系型数据库的SQL语句,尽管Java客户端API为我们不需要我们去 ...

  6. NetworkStream.Read

    Reads data from the NetworkStream. 参数 buffer 类型:System.Byte[]类型 Byte 的数组,它是内存中用于存储从 NetworkStream 读取 ...

  7. Python学习6——再谈抽象（面对对象编程）

    1.对象魔法 在面对对象编程中,术语对象大致意味着一系列数据(属性)以及一套访问和操作这些数据的方法. 使用对象而非全局变量以及函数的原因有多个,而最重要的好处不过以下几点: 多态:可对不同类型的对象 ...

  8. python课堂整理2

    一.字节和编码 1个字节是8位二进制 utf-8 表示一个中文要用3个字节 gbk 为中国汉字发明,2个字节可表示汉字 所以 utf-8 可以读gbk编码,而gbk去读utf-8 的内容会乱码 uni ...

  9. linux初学者-SElinux篇

    linux初学者-SElinux篇 SElinux是强制访问控制(MAC)安全系统,是linux历史上最杰出的新安全系统.对于linux安全模块来说,SElinux的功能是最全面的,测试也是最充分的, ...

  10. On The Way—Step 2 Python入门之Python内容初始

    2.1 输出 print() ​ 打印一个字符串 print('你真好!') ​ 打印变量内容 a = '你真好!' print(a) 结果都是:你真好! 2.2 变量 变量名字规则 只能用下划线.字 ...