我们知道，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. 文档管理器 PDFelement Pro v6.8.4.3921 精简绿色版

    下载地址:点我 PDFelement是PDF全套解决方案专家,专注于PDF的创建.编辑.转换.标注.保护.管理.水印.压缩.签名等功能.Wondershare PDFelement是款国产优秀的专业P ...

  2. Java学习笔记之---类和对象

    Java学习笔记之---类和对象 (一)类 类是一个模板,它描述一类对象的行为和状态  例如:动物类是一个类,动物们都有属性:颜色,动物们都有行为:吃饭 public class Dog { Stri ...

  3. ServiceFabric极简文档-4.0 开发环境搭建

    1. VS2017安装包启动页,安装Azure.(安装的VS的Tool)2. 下载Service Fabric Web PI,安装Service Fabric(自动安装SDK与Runtime)

  4. 洛谷P2057 [SHOI2007]善意的投票 题解

    题目链接: https://www.luogu.org/problemnew/show/P2057 分析: 由0和1的选择我们直觉的想到0与S一堆,1与T一堆. 但是发现,刚开始的主意并不一定是最终的 ...

  5. 分布式Streaming Data Processing - Samza

    ​ 现在的主流的互联网应用越来越依赖streaming data来提供用户一些interesting statistics insights.以linkedin为例,最近90天有多少人看过你的link ...

  6. C语言入门3-C语言概述及数据类型

    一.          计算机程序设计语言 (计算机语言的发展历史) 1.       机器语言 机器语言 二进制代码语言,由  0和1组成的. 特点是:计算机可以直接识别,不需要进行任何的翻译. 2 ...

  7. [leetcode] 300. Longest Increasing Subsequence (Medium)

    题意: 求最长增长的子序列的长度. 思路: 利用DP存取以i作为最大点的子序列长度. Runtime: 20 ms, faster than 35.21% of C++ online submissi ...

  8. [leetcode] 67. Add Binary (easy)

    原题链接 思路: 用一个数保存进制,从后往前不断pop出两个数字和进制数相加,放入返回值中. var addBinary = function(a, b) { var arrA = a.split(' ...

  9. 如何优雅关闭 Spring Boot 应用

    ## 前言 随着线上应用逐步采用 SpringBoot 构建,SpringBoot应用实例越来多,当线上某个应用需要升级部署时,常常简单粗暴地使用 kill 命令,这种停止应用的方式会让应用将所有处理 ...

  10. Linux下gcc编译器的使用

    例:gcc -x -g c helloC -o firstC -x:改变gcc的行为.(注:如果是.c文件则不用加-x) -x c :编译c程序 -x c++ :编译c++程序 -x java :编译 ...