解决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({
                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({
                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();

 

posted @ 2019-08-14 14:45  _skylar  阅读(5360)  评论(0)  编辑  收藏  举报